/* Leology theme · design system tokens (Arena × B, design system 1.2.0).
   A COPY of design-review/premium-redesign/04_approved/arena-b/design-system/source/tokens.css (generated from
   tokens.json, version 1.2.0): the theme stays self-contained and design-review/ is never deployed. To change a
   value, change tokens.json, regenerate tokens.css, and copy it here again (FRONTEND_IMPLEMENTATION_PLAN.md §6).

   Loaded on the redesigned surfaces only (inc/ds.php): Blog, archives, search, articles, Community, events.
   Everything here sits in the cascade layer `ds`, declared after `legacy` (style.css), so it wins without
   specificity battles while untouched parts keep their legacy styles. */

/* Metric-matched fallbacks: until the web fonts arrive, text sets in a local face scaled to the web
   face's width (size-adjust, measured in Chrome against Vietnamese and English samples, within 1.5 %),
   so lines break in the same places and nothing moves when the fonts swap in. */
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 72%; }
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 73.6%; }
@font-face { font-family: 'Hanken Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 99%; }
@font-face { font-family: 'Hanken Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 95%; }
@font-face { font-family: 'Hanken Fallback'; src: local('Arial Italic'), local('Arial-ItalicMT'); font-style: italic; font-weight: 100 549; size-adjust: 97%; }
@font-face { font-family: 'Hanken Fallback'; src: local('Arial Bold Italic'), local('Arial-BoldItalicMT'); font-style: italic; font-weight: 550 900; size-adjust: 94.7%; }

@layer ds {
	:root {
		/* color */
		--ds-color-ultramarine: #1726C4;
		--ds-color-ultramarine-deep: #0C0080;
		--ds-color-sun: #FFDA3B;
		--ds-color-sand: #FFF1B8;
		--ds-color-grey: #F1F2F8;
		--ds-color-paper: #FFFFFF;
		--ds-color-ink: #0B0E2E;
		--ds-color-ink-2: #2E3256;
		--ds-color-ink-3: #565B7E;
		--ds-color-line: rgba(23, 38, 196, 0.16);
		--ds-color-line-strong: rgba(23, 38, 196, 0.32);
		--ds-color-on-dark: rgba(255, 255, 255, 0.86);
		--ds-color-on-dark-muted: rgba(255, 255, 255, 0.72);
		--ds-color-on-dark-frame: rgba(255, 255, 255, 0.6);
		--ds-color-rule-on-ultramarine: rgba(255, 255, 255, 0.16);
		--ds-color-rule-on-deep: rgba(255, 255, 255, 0.1);
		--ds-color-rule-on-sun: rgba(11, 14, 46, 0.1);
		--ds-color-backdrop: rgba(5, 7, 34, 0.62);
		--ds-color-danger: #B42318;  /* proposed: not in the mockup */
		--ds-color-success: #007A35;  /* proposed: not in the mockup */

		/* surface */
		--ds-surface-page: var(--ds-color-paper);
		--ds-surface-field: var(--ds-color-ultramarine);
		--ds-surface-deep: var(--ds-color-ultramarine-deep);
		--ds-surface-sun: var(--ds-color-sun);
		--ds-surface-support: var(--ds-color-grey);
		--ds-surface-quote: var(--ds-color-sand);

		/* text */
		--ds-text-default: var(--ds-color-ink);
		--ds-text-secondary: var(--ds-color-ink-2);
		--ds-text-tertiary: var(--ds-color-ink-3);
		--ds-text-brand: var(--ds-color-ultramarine);
		--ds-text-title: var(--ds-color-ultramarine-deep);
		--ds-text-on-dark: var(--ds-color-on-dark);
		--ds-text-on-dark-strong: var(--ds-color-paper);
		--ds-text-accent-on-dark: var(--ds-color-sun);

		/* action */
		--ds-action-primary-bg: var(--ds-color-sun);
		--ds-action-primary-fg: var(--ds-color-ink);
		--ds-action-primary-hover-bg: var(--ds-color-ink);
		--ds-action-primary-hover-fg: var(--ds-color-sun);
		--ds-action-secondary-bg: var(--ds-color-ultramarine);
		--ds-action-secondary-fg: var(--ds-color-paper);
		--ds-action-secondary-hover-bg: var(--ds-color-ink);
		--ds-action-hover-fill: var(--ds-color-sun);
		--ds-action-selected-bg: var(--ds-color-ultramarine);
		--ds-action-selected-fg: var(--ds-color-paper);

		/* focus */
		--ds-focus-on-light: var(--ds-color-ink);
		--ds-focus-on-dark: var(--ds-color-sun);  /* proposed: not in the mockup */
		--ds-focus-width: 2px;
		--ds-focus-offset: 3px;

		/* font */
		--ds-font-family-display: 'Bricolage Grotesque', 'Bricolage Fallback', sans-serif;
		--ds-font-family-text: 'Hanken Grotesk', 'Hanken Fallback', Arial, sans-serif;
		--ds-font-family-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
		--ds-font-stretch-display: 75%;
		--ds-font-weight-regular: 400;
		--ds-font-weight-medium: 500;
		--ds-font-weight-semibold: 600;
		--ds-font-weight-bold: 700;
		--ds-font-weight-extrabold: 800;

		/* type */
		--ds-type-display-closing-family: var(--ds-font-family-display);
		--ds-type-display-closing-weight: 800;
		--ds-type-display-closing-size: clamp(64px, 11.5vw, 196px);
		--ds-type-display-closing-leading: 0.9;
		--ds-type-display-closing-leading-vi: 0.98;
		--ds-type-display-hero-family: var(--ds-font-family-display);
		--ds-type-display-hero-weight: 800;
		--ds-type-display-hero-size: clamp(52px, 6.6vw, 112px);
		--ds-type-display-hero-size-en: clamp(46px, 5.6vw, 96px);
		--ds-type-display-hero-leading: 0.96;
		--ds-type-display-hero-leading-vi: 1.04;
		--ds-type-display-hero-tracking: -0.004em;
		--ds-type-display-masthead-family: var(--ds-font-family-display);
		--ds-type-display-masthead-weight: 800;
		--ds-type-display-masthead-size: clamp(52px, 8.6vw, 140px);
		--ds-type-display-masthead-size-en: clamp(34px, 7.2vw, 118px);
		--ds-type-display-masthead-leading: 0.92;
		--ds-type-display-masthead-leading-vi: 1.02;
		--ds-type-display-community-family: var(--ds-font-family-display);
		--ds-type-display-community-weight: 800;
		--ds-type-display-community-size: clamp(60px, 10.2vw, 148px);
		--ds-type-display-community-leading: 0.84;
		--ds-type-display-community-tracking: -0.005em;
		--ds-type-display-band-family: var(--ds-font-family-display);
		--ds-type-display-band-weight: 800;
		--ds-type-display-band-size: clamp(46px, 6.4vw, 104px);
		--ds-type-display-band-leading: 0.92;
		--ds-type-display-band-leading-vi: 1.02;
		--ds-type-display-word-family: var(--ds-font-family-display);
		--ds-type-display-word-weight: 800;
		--ds-type-display-word-size: clamp(96px, 11vw, 176px);
		--ds-type-display-word-leading: 0.8;
		--ds-type-heading-section-family: var(--ds-font-family-display);
		--ds-type-heading-section-weight: 800;
		--ds-type-heading-section-size: clamp(40px, 4.8vw, 76px);
		--ds-type-heading-section-leading: 0.96;
		--ds-type-heading-section-leading-vi: 1.06;
		--ds-type-heading-sechead-family: var(--ds-font-family-display);
		--ds-type-heading-sechead-weight: 800;
		--ds-type-heading-sechead-size: clamp(34px, 3.7vw, 58px);
		--ds-type-heading-sechead-leading: 1;
		--ds-type-heading-sechead-leading-vi: 1.08;
		--ds-type-heading-card-xl-family: var(--ds-font-family-display);
		--ds-type-heading-card-xl-weight: 800;
		--ds-type-heading-card-xl-size: clamp(48px, 5vw, 80px);
		--ds-type-heading-card-xl-leading: 0.9;
		--ds-type-title-article-family: var(--ds-font-family-display);
		--ds-type-title-article-weight: 700;
		--ds-type-title-article-size: clamp(42px, 5.6vw, 88px);
		--ds-type-title-article-leading: 0.96;
		--ds-type-title-article-leading-vi: 1.05;
		--ds-type-title-article-measure: 15em;
		--ds-type-title-article-measure-quote: 11em;
		--ds-type-title-feature-family: var(--ds-font-family-display);
		--ds-type-title-feature-weight: 700;
		--ds-type-title-feature-size: clamp(34px, 3.2vw, 50px);
		--ds-type-title-feature-leading: 0.98;
		--ds-type-title-feature-leading-vi: 1.07;
		--ds-type-title-event-family: var(--ds-font-family-display);
		--ds-type-title-event-weight: 700;
		--ds-type-title-event-size: clamp(30px, 2.9vw, 44px);
		--ds-type-title-event-leading: 1;
		--ds-type-title-event-leading-vi: 1.08;
		--ds-type-heading-prose-family: var(--ds-font-family-display);
		--ds-type-heading-prose-weight: 700;
		--ds-type-heading-prose-size: clamp(32px, 3vw, 42px);
		--ds-type-heading-prose-leading: 1.02;
		--ds-type-heading-prose-leading-vi: 1.1;
		--ds-type-title-step-family: var(--ds-font-family-display);
		--ds-type-title-step-weight: 700;
		--ds-type-title-step-size: clamp(27px, 2.4vw, 34px);
		--ds-type-title-step-leading: 1.02;
		--ds-type-title-step-leading-vi: 1.12;
		--ds-type-title-card-family: var(--ds-font-family-display);
		--ds-type-title-card-weight: 700;
		--ds-type-title-card-size: 27px;
		--ds-type-title-card-leading: 1.04;
		--ds-type-title-card-leading-vi: 1.12;
		--ds-type-numeral-step-family: var(--ds-font-family-display);
		--ds-type-numeral-step-weight: 800;
		--ds-type-numeral-step-size: clamp(96px, 10vw, 156px);
		--ds-type-numeral-step-leading: 0.8;
		--ds-type-numeral-stat-family: var(--ds-font-family-display);
		--ds-type-numeral-stat-weight: 800;
		--ds-type-numeral-stat-size: clamp(40px, 3.8vw, 60px);
		--ds-type-numeral-stat-leading: 0.9;
		--ds-type-numeral-event-family: var(--ds-font-family-display);
		--ds-type-numeral-event-weight: 800;
		--ds-type-numeral-event-size: clamp(120px, 15vw, 240px);
		--ds-type-numeral-event-leading: 0.8;
		--ds-type-label-nav-family: var(--ds-font-family-display);
		--ds-type-label-nav-weight: 700;
		--ds-type-label-nav-size: 19px;
		--ds-type-label-nav-size-menu: 24px;
		--ds-type-label-nav-tracking: 0.02em;
		--ds-type-label-button-family: var(--ds-font-family-display);
		--ds-type-label-button-weight: 700;
		--ds-type-label-button-size: 18px;
		--ds-type-label-button-size-sm: 16px;
		--ds-type-label-button-size-lg: 21px;
		--ds-type-label-button-tracking: 0.03em;
		--ds-type-label-section-family: var(--ds-font-family-display);
		--ds-type-label-section-weight: 700;
		--ds-type-label-section-size: 17px;
		--ds-type-label-section-size-eyebrow: 16px;
		--ds-type-label-section-leading: 1.2;
		--ds-type-label-section-tracking: 0.06em;
		--ds-type-label-tag-family: var(--ds-font-family-display);
		--ds-type-label-tag-weight: 700;
		--ds-type-label-tag-size: 15px;
		--ds-type-label-tag-tracking: 0.03em;
		--ds-type-label-small-family: var(--ds-font-family-display);
		--ds-type-label-small-weight: 700;
		--ds-type-label-small-size: 14px;
		--ds-type-label-small-tracking: 0.05em;
		--ds-type-text-lede-family: var(--ds-font-family-text);
		--ds-type-text-lede-weight: 500;
		--ds-type-text-lede-size: clamp(18px, 1.5vw, 21px);
		--ds-type-text-lede-leading: 1.55;
		--ds-type-text-deck-family: var(--ds-font-family-text);
		--ds-type-text-deck-weight: 500;
		--ds-type-text-deck-size: clamp(19px, 1.6vw, 23px);
		--ds-type-text-deck-leading: 1.5;
		--ds-type-text-prose-family: var(--ds-font-family-text);
		--ds-type-text-prose-weight: 400;
		--ds-type-text-prose-size: 18px;
		--ds-type-text-prose-leading: 1.75;
		--ds-type-heading-prose-3-family: var(--ds-font-family-text);
		--ds-type-heading-prose-3-weight: 700;
		--ds-type-heading-prose-3-size: 21px;
		--ds-type-heading-prose-3-leading: 1.35;
		--ds-type-text-body-family: var(--ds-font-family-text);
		--ds-type-text-body-weight: 400;
		--ds-type-text-body-size: 16px;
		--ds-type-text-body-leading: 1.6;
		--ds-type-text-body-lg-family: var(--ds-font-family-text);
		--ds-type-text-body-lg-weight: 400;
		--ds-type-text-body-lg-size: 17px;
		--ds-type-text-body-lg-leading: 1.65;
		--ds-type-text-small-family: var(--ds-font-family-text);
		--ds-type-text-small-weight: 400;
		--ds-type-text-small-size: 15px;
		--ds-type-text-small-leading: 1.6;
		--ds-type-text-meta-family: var(--ds-font-family-text);
		--ds-type-text-meta-weight: 400;
		--ds-type-text-meta-size: 13px;
		--ds-type-text-meta-size-lg: 14px;
		--ds-type-text-meta-leading: 1.45;
		--ds-type-text-note-family: var(--ds-font-family-text);
		--ds-type-text-note-weight: 600;
		--ds-type-text-note-size: clamp(16px, 1.25vw, 19px);
		--ds-type-text-note-leading: 1.25;
		--ds-type-text-tagline-family: var(--ds-font-family-text);
		--ds-type-text-tagline-weight: 600;
		--ds-type-text-tagline-size: min(29px, 3.95cqi);
		--ds-type-text-tagline-leading: 1.3;
		--ds-type-text-tagline-size-narrow: 20px;
		--ds-type-text-control-family: var(--ds-font-family-text);
		--ds-type-text-control-weight: 600;
		--ds-type-text-control-size: 14px;
		--ds-type-text-control-leading: 1.2;
		--ds-type-text-mono-family: var(--ds-font-family-mono);
		--ds-type-text-mono-weight: 400;
		--ds-type-text-mono-size: 13px;
		--ds-type-text-mono-leading: 1.6;

		/* space */
		--ds-space-1: 4px;
		--ds-space-2: 8px;
		--ds-space-3: 12px;
		--ds-space-4: 16px;
		--ds-space-5: 20px;
		--ds-space-6: 24px;
		--ds-space-7: 28px;
		--ds-space-8: 32px;
		--ds-space-9: 40px;
		--ds-space-10: 48px;
		--ds-space-11: 56px;
		--ds-space-12: 64px;
		--ds-space-13: 72px;
		--ds-space-14: 96px;
		--ds-space-15: 128px;

		/* section */
		--ds-section-block: clamp(80px, 9vw, 128px);
		--ds-section-first: clamp(56px, 6vw, 88px);
		--ds-section-follow: clamp(72px, 7vw, 104px);
		--ds-section-band: 96px;

		/* size */
		--ds-size-container: 1320px;
		--ds-size-container-fluid: 90%;
		--ds-size-gutter: 20px;
		--ds-size-measure: 700px;
		--ds-size-nav-height: 64px;
		--ds-size-nav-height-phone: 58px;
		--ds-size-logo: 26px;
		--ds-size-logo-phone: 23px;
		--ds-size-touch: 44px;
		--ds-size-button: 52px;
		--ds-size-button-sm: 40px;
		--ds-size-button-lg: 60px;
		--ds-size-icon: 20px;
		--ds-size-icon-sm: 16px;
		--ds-size-sticker: clamp(96px, 8.2vw, 118px);
		--ds-size-scroll-offset: 88px;
		--ds-size-sticky-top: 100px;
		--ds-size-banner-height: clamp(320px, calc(100vw / 3.3), 440px);
		--ds-size-banner-max-phone: 400px;
		--ds-size-stream-photo: 216px;
		--ds-size-stream-photo-tablet: 180px;
		--ds-size-stream-photo-phone: 144px;
		--ds-size-stream-gap: 18px;
		--ds-size-stream-gap-phone: 12px;
		--ds-size-avatar-quote: 72px;

		/* border */
		--ds-border-hair: 1px;
		--ds-border-thin: 1.5px;
		--ds-border-base: 2px;
		--ds-border-thick: 3px;
		--ds-border-cover: 6px;

		/* radius */
		--ds-radius-none: 0px;
		--ds-radius-round: 50%;

		/* ring */
		--ds-ring-card-hover: 0 0 0 1.5px var(--ds-color-ultramarine);
		--ds-ring-feature-hover: 0 0 0 2px var(--ds-color-ultramarine);
		--ds-ring-input-focus: 0 0 0 3px var(--ds-color-sun);
		--ds-ring-sticker: inset 0 0 0 3px var(--ds-color-sun), inset 0 0 0 5px var(--ds-color-ink);
		--ds-ring-sticker-on-sun: inset 0 0 0 3px var(--ds-color-ultramarine), inset 0 0 0 5px var(--ds-color-paper);
		--ds-ring-mark: 0 0 0 2px var(--ds-color-ink);

		/* rotate */
		--ds-rotate-sticker: -12deg;
		--ds-rotate-sticker-on-sun: -9deg;
		--ds-rotate-note: -3deg;
		--ds-rotate-ticket: -3deg;
		--ds-rotate-ticket-hover: -1.5deg;

		/* breakpoint */
		--ds-breakpoint-xs: 420px;
		--ds-breakpoint-sm: 600px;
		--ds-breakpoint-board: 640px;
		--ds-breakpoint-md: 768px;
		--ds-breakpoint-lg: 900px;
		--ds-breakpoint-xl: 1024px;
		--ds-breakpoint-xxl: 1280px;

		/* z */
		--ds-z-nav: 50;
		--ds-z-menu: 60;
		--ds-z-progress: 70;
		--ds-z-skip: 100;
		--ds-z-notice: 1100;

		/* motion */
		--ds-motion-ease-press: cubic-bezier(0.2, 0.7, 0.1, 1);
		--ds-motion-ease-fade: cubic-bezier(0.3, 0, 0.2, 1);
		--ds-motion-duration-state: 160ms;
		--ds-motion-duration-nudge: 220ms;
		--ds-motion-duration-stamp: 300ms;
		--ds-motion-duration-highlight: 380ms;
		--ds-motion-duration-fade: 500ms;
		--ds-motion-duration-text: 560ms;
		--ds-motion-duration-rise: 600ms;
		--ds-motion-duration-card: 640ms;
		--ds-motion-duration-draw-short: 700ms;
		--ds-motion-duration-wipe: 720ms;
		--ds-motion-duration-image: 800ms;
		--ds-motion-duration-draw: 900ms;
		--ds-motion-duration-band: 1000ms;
		--ds-motion-duration-rules: 1100ms;
		--ds-motion-duration-stream-frame: 9s;
		--ds-motion-duration-stream-frame-tablet: 7.6s;
		--ds-motion-duration-stream-frame-phone: 6s;
		--ds-motion-distance-text: 10px;
		--ds-motion-distance-card: 16px;
		--ds-motion-distance-track: 8px;
		--ds-motion-stagger-row: 45ms;
		--ds-motion-stagger-photo: 60ms;
		--ds-motion-stagger-line: 70ms;
		--ds-motion-stagger-card: 90ms;
		--ds-motion-stagger-accent: 120ms;
		--ds-motion-stagger-max-steps: 4;
		--ds-motion-reveal-threshold: 0.12;
		--ds-motion-reveal-root-margin-bottom: -8%;
		--ds-motion-font-wait-max: 1200ms;
		--ds-motion-fallback-after: 2500ms;
	}

	/* The mockup's working names (Arena-x-B-01-r1/css/style.css), as aliases of the tokens, so the surface CSS reads
	   like the approved mockup while every value still comes from tokens.json. */
	:root {
		--b-field: var(--ds-color-ultramarine);
		--b-deep: var(--ds-color-ultramarine-deep);
		--b-sun: var(--ds-color-sun);
		--b-sand: var(--ds-color-sand);
		--b-grey: var(--ds-color-grey);
		--b-ink: var(--ds-color-ink);
		--b-ink-2: var(--ds-color-ink-2);
		--b-ink-3: var(--ds-color-ink-3);
		--b-line: var(--ds-color-line);
		--b-line-2: var(--ds-color-line-strong);
		--b-on: var(--ds-color-on-dark);
		--ax-paper: var(--ds-color-paper);
		--ax-ink: var(--ds-color-ink);
		--ax-focus: var(--ds-color-ink);
		--ax-display: var(--ds-font-family-display);
		--ax-text: var(--ds-font-family-text);
		--ax-block: var(--ds-section-block);
		--mo-ease: var(--ds-motion-ease-press);
		--mo-ease-fade: var(--ds-motion-ease-fade);

		/* The legacy theme's tokens, re-pointed for the parts of these pages that are not redrawn yet (account
		   control, sign-in wall, consent banner, interactive wrappers): B's faces and colours, square corners,
		   no shadows or glass. */
		--leo-sans: var(--ds-font-family-text);
		--leo-serif: var(--ds-font-family-display);
		--leo-navy: var(--ds-color-ultramarine-deep);
		--leo-navy-deep: var(--ds-color-ultramarine-deep);
		--leo-navy-mid: var(--ds-color-ultramarine);
		--leo-navy-ink: var(--ds-color-ink);
		--leo-blue: var(--ds-color-ultramarine);
		--leo-blue-hi: var(--ds-color-ultramarine);
		--leo-yellow: var(--ds-color-sun);
		--leo-paper: var(--ds-color-paper);
		--leo-ink: var(--ds-color-ink);
		--leo-muted: var(--ds-color-ink-3);
		--leo-r-xs: 0;
		--leo-r-sm: 0;
		--leo-r-md: 0;
		--leo-r-lg: 0;
		--leo-r-xl: 0;
		--leo-r-pill: 0;
		--leo-sh-glass: none;
		--leo-sh-nav: none;
	}
}