/**
 * ECUE — design tokens.
 * =============================================================================
 * Copied from the approved ECUE/VGEM design system. Values are unchanged except
 * for one substitution, documented under "Typefaces" below.
 *
 * Nothing in this file describes a component. It only names the raw material:
 * colours, type scale, spacing, shape, motion. If you are changing how a thing
 * *looks*, you almost certainly want theme.css instead.
 *
 * @package ecue
 */

/* -----------------------------------------------------------------------------
 * Typefaces
 * -----------------------------------------------------------------------------
 * The design system shipped four faces. Three of them serve the full Vietnamese
 * character set; one did not.
 *
 *   Familjen Grotesk  (display)    — verified: covers Vietnamese. Kept.
 *   Source Serif 4    (editorial)  — verified: covers Vietnamese. Kept.
 *   IBM Plex Mono     (labels)     — verified: covers Vietnamese. Kept.
 *   Karla             (body text)  — NO Vietnamese subset. Replaced.
 *
 * Karla has no Vietnamese coverage at all: Google serves it without a
 * vietnamese subset, and its latin-ext subset reaches only U+1EF2–1EFF (Ỳ ỳ Ỵ ỵ
 * Ỷ ỷ Ỹ ỹ). Every other accented Vietnamese letter — ệ ờ ữ ặ ẩ, the majority of
 * running text — would have been drawn by a fallback face instead, giving
 * visibly mixed lettering inside single words.
 *
 * Be Vietnam Pro replaces it for body text. It was already named as the
 * fallback in the original design system, so the approved artboards were drawn
 * anticipating it. It is a Vietnamese-first grotesque, so the substitution is
 * closest exactly where it matters most.
 *
 * If real ECUE brand faces are ever supplied, drop the woff2 files in
 * assets/fonts/ and replace the @import in functions.php with @font-face rules
 * using these same family names. Nothing else needs to change.
 * -------------------------------------------------------------------------- */

:root {
  --font-display: "Familjen Grotesk", "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --font-editorial: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* -----------------------------------------------------------------------------
 * Colour
 * -------------------------------------------------------------------------- */

:root {
  /* Ink & warm stone neutrals — the shared institutional ground. */
  --ink-900: #141210;
  --ink-800: #242020;
  --ink-700: #3a3532;
  --ink-600: #4d4d4d;
  --stone-500: #7a736c;
  --stone-400: #a39b92;
  --stone-300: #c9c1b8;
  --stone-200: #e3ddd4;
  --stone-100: #efeae2;
  --stone-050: #f7f4ef;
  --paper: #fffdf9;
  --white: #ffffff;

  /* Ecosystem accents, sampled from the VGEM mark. */
  --violet-900: #2c1a45;
  --violet-700: #3d2560;
  --violet-500: #533280;
  --violet-300: #8f74b5;
  --violet-100: #e6ddf1;
  --violet-050: #f3eff9;

  --ember-700: #b83a17;
  --ember-500: #f05025;
  --ember-300: #f79170;
  --ember-100: #fde3d9;

  --solar-500: #f7de33;
  --solar-300: #fbec8d;
  --solar-100: #fdf7d2;

  --forest-700: #1c4638;
  --forest-500: #2c6b55;
  --forest-100: #dbe9e3;

  --gradient-ember: linear-gradient(180deg, var(--ember-500) 0%, #f27e2c 45%, var(--solar-500) 100%);
  --gradient-ember-h: linear-gradient(90deg, var(--ember-500) 0%, var(--solar-500) 100%);

  /* Semantic. */
  --success-500: #2c6b55;
  --warning-500: #c98a11;
  --danger-500: #b3261e;
  --info-500: #533280;
  --success-100: #dbe9e3;
  --warning-100: #fbf0d2;
  --danger-100: #f7dedc;
  --info-100: #e6ddf1;

  /* Text. */
  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);

  /*
   * Muted text is NOT --stone-500.
   *
   * stone-500 is right as a line and a fill, but as small text it reaches only
   * 4.26:1 on the stone-050 ground the design uses for its quiet bands — under
   * the 4.5:1 AA needs for body copy. This is a touch darker: 5.48 on paper,
   * 5.07 on stone-050, 4.65 on stone-100, so it passes on every surface the
   * design puts it on. stone-500 itself is unchanged for everything else.
   */
  --text-muted: #6e6760;
  --text-inverse: var(--paper);
  --text-accent: var(--ember-700);
  --text-link: var(--ink-900);
  --text-link-hover: var(--ember-700);

  /* Surfaces. */
  --surface-page: var(--paper);
  --surface-raised: var(--white);
  --surface-sunken: var(--stone-050);
  --surface-quiet: var(--stone-100);
  --surface-inverse: var(--ink-900);
  --surface-accent: var(--ember-500);
  --surface-brand: var(--ink-900);

  /* Lines. Lines do the work of shadows in this system. */
  --line-hairline: color-mix(in oklab, var(--ink-900) 12%, transparent);
  --line-strong: var(--ink-900);
  --line-quiet: var(--stone-200);
  --line-inverse: color-mix(in oklab, var(--paper) 24%, transparent);

  --focus-ring: var(--ember-500);
}

/* -----------------------------------------------------------------------------
 * Type scale — modular ~1.28, tuned by hand at text sizes.
 * The responsive steps live in theme.css, which redefines --fs-* at 900px and
 * 600px. Everything else reads these variables, so nothing else needs a query.
 * -------------------------------------------------------------------------- */

:root {
  --fs-display-1: 88px;
  --fs-display-2: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 27px;
  --fs-h4: 21px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-label: 12px;

  /*
   * Line heights, corrected for Vietnamese.
   *
   * The design system's original display values (0.94 and 1.02) are Latin
   * numbers. Vietnamese stacks a tone mark above a vowel that may already carry
   * a circumflex — ệ, ộ, ữ, ặ — and puts a descender below, so a line of real
   * Vietnamese in Familjen Grotesk inks 1.03× its font size. At 0.94 a
   * multi-line headline overlapped itself by 7px, measured on the actual
   * rendered home page rather than guessed.
   *
   * The numbers below were derived by measuring, for every rendered pair of
   * lines on every page, the ink below one line's baseline plus the ink above
   * the next line's — the quantity that actually has to fit inside the leading.
   * The home page hero needed 100px at 88px type; 0.94 gave it 82.7px.
   */
  --lh-tight: 1.16;
  --lh-display: 1.14;
  --lh-heading: 1.18;
  --lh-snug: 1.35;
  --lh-body: 1.58;
  --lh-loose: 1.7;

  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-body: 0em;
  --tracking-label: 0.14em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Semantic roles. */
  --type-display: var(--fw-bold) var(--fs-display-1) / var(--lh-tight) var(--font-display);
  --type-h1: var(--fw-bold) var(--fs-h1) / var(--lh-heading) var(--font-display);
  --type-h2: var(--fw-semibold) var(--fs-h2) / var(--lh-heading) var(--font-display);
  --type-h3: var(--fw-semibold) var(--fs-h3) / var(--lh-snug) var(--font-display);
  --type-h4: var(--fw-semibold) var(--fs-h4) / var(--lh-snug) var(--font-display);
  --type-body: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-text);
  --type-body-sm: var(--fw-regular) var(--fs-body-sm) / var(--lh-body) var(--font-text);
  --type-body-lg: var(--fw-regular) var(--fs-body-lg) / var(--lh-loose) var(--font-text);
  --type-caption: var(--fw-regular) var(--fs-caption) / var(--lh-snug) var(--font-text);
  --type-label: var(--fw-medium) var(--fs-label) / 1 var(--font-mono);
  --type-editorial: var(--fw-regular) var(--fs-display-2) / 1.06 var(--font-editorial);
}

/* -----------------------------------------------------------------------------
 * Spacing & layout
 * -------------------------------------------------------------------------- */

:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;
  --space-12: 192px;

  --section-y: var(--space-10);
  --section-y-lg: var(--space-12);
  --gutter: var(--space-6);
  --gutter-lg: var(--space-8);

  --container-max: 1320px;
  --container-text: 660px;
  --container-wide: 1560px;
  --grid-gap: var(--space-6);
  --header-height: 76px;
}

/* -----------------------------------------------------------------------------
 * Shape — the system is square by default. Roundness is reserved for
 * interactive pills, echoing the rounded terminals of the ecue wordmark.
 * -------------------------------------------------------------------------- */

:root {
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --radius-card: var(--radius-none);
  --radius-control: var(--radius-pill);
  --radius-field: var(--radius-xs);
  --radius-media: var(--radius-none);

  --border-hairline: 1px;
  --border-strong: 2px;
  --border-rule: 3px;
  --border-slab: 8px;
}

/* -----------------------------------------------------------------------------
 * Elevation — shadow exists only for things that genuinely float.
 * -------------------------------------------------------------------------- */

:root {
  --shadow-none: none;
  --shadow-overlay: 0 24px 64px -16px color-mix(in oklab, var(--ink-900) 32%, transparent);
  --shadow-popover: 0 8px 24px -8px color-mix(in oklab, var(--ink-900) 24%, transparent);
  --shadow-inset-rule: inset 0 -1px 0 0 var(--line-hairline);

  --scrim-modal: color-mix(in oklab, var(--ink-900) 62%, transparent);
  --scrim-media: linear-gradient(180deg, transparent 30%, color-mix(in oklab, var(--ink-900) 82%, transparent) 100%);
}

/* -----------------------------------------------------------------------------
 * Motion
 * -------------------------------------------------------------------------- */

:root {
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reveal: 560ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 1, 1);

  --transition-control:
    color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}

/* -----------------------------------------------------------------------------
 * Brand scopes
 * -----------------------------------------------------------------------------
 * Two brands over one foundation, set with data-brand on any element.
 *
 * VGEM is NOT part of this build. The scope is kept because the ECUE site
 * carries a VGEM gateway panel that uses the violet ground, and because a VGEM
 * sub-site later will then need no CSS work at all.
 * -------------------------------------------------------------------------- */

[data-brand="ecue"] {
  --brand-primary: var(--ink-900);
  --brand-primary-contrast: var(--paper);
  --brand-accent: var(--ember-500);
  --brand-accent-quiet: var(--ember-100);
  --brand-support: var(--forest-500);
  --brand-surface: var(--paper);
  --brand-surface-alt: var(--stone-050);
  --surface-brand: var(--ink-900);
  --text-link-hover: var(--ember-700);
}

[data-brand="vgem"] {
  --brand-primary: var(--violet-500);
  --brand-primary-contrast: var(--paper);
  --brand-accent: var(--ember-500);
  --brand-accent-quiet: var(--violet-100);
  --brand-support: var(--solar-500);
  --brand-surface: var(--paper);
  --brand-surface-alt: var(--violet-050);
  --surface-brand: var(--violet-500);
  --text-link-hover: var(--violet-500);
}