/**
 * Design tokens – THE ONE FILE THAT CARRIES A VALUE.
 *
 * Every colour, size, space and radius in the theme resolves to something
 * declared here. No section file and no stylesheet anywhere else is allowed a
 * literal `#hex` or a hardcoded `24px` – that is a defect, not a shortcut.
 *
 * ---------------------------------------------------------------------------
 * TWO LAYERS, AND WHY
 * ---------------------------------------------------------------------------
 *
 * Layer 1, ROLE TOKENS (`--brand-primary`, `--ink`, `--surface`). Named by the
 * job they do, never by what colour they happen to be. These hold the literal
 * values, and these are the names Theme Settings overrides at runtime through
 * an inline <style> emitted after this file.
 *
 * Layer 2, the FINAS ALIAS LAYER (`--blue`, `--navy`, `--s-4`, `--r-card`).
 * These are the names the signed-off design system uses – `assets/css/pages.css`
 * and all 20 approved mock-ups are written against them, and port here
 * byte-identical.
 *
 * The direction matters and is not interchangeable. Because the aliases resolve
 * THROUGH the roles, a Theme Settings override of `--brand-primary` reaches
 * `--blue` and therefore reaches every rule in `pages.css`. Declare it the
 * other way around and Theme Settings would silently stop working on the design
 * system it is meant to control.
 *
 * So: to change a value, change the role token. To use a value, use whichever
 * name reads better where you are – they are the same value.
 *
 * ---------------------------------------------------------------------------
 * THE PALETTE
 * ---------------------------------------------------------------------------
 *
 * Taken from the FINAS logo. Blue carries, red acts, gold promises:
 *
 *   Royal Blue #17478A · Red #EA2331 · Gold #F9DE3B · Navy #1B294A
 *
 * The red the UI uses is a shade darker than the logo red, at #D81E2B, so it
 * can carry text and clear WCAG AA. See --brand-accent below.
 *
 * Red is the single action colour and appears once per viewport. Gold is
 * display-only – `--brand-highlight` fails AA as text on light grounds, which
 * is exactly why `--brand-support` (#7D6800) exists beside it.
 */

/* ---------------------------------------------------------------------------
 * LAYER 1 – ROLE TOKENS. Theme Settings overrides these.
 * ------------------------------------------------------------------------- */
:root {
  /* --- Brand -------------------------------------------------------------
     primary    the dominant brand colour: links, primary paths, blue grounds
     deep       the darkest ground: navy bands, footer, headings
     accent     the ONE action colour. Earns attention by restraint – one red
                button per viewport, never two
     highlight  gold. Display only: underlines, stats on navy, never as text
                on a light ground
     support    the AA-safe gold-derived text colour for light grounds. #B89A0A
                reads as gold but measures ~2.7:1 on white, below AA. This one
                clears 4.5:1 on both --surface and --highlight-tint, so gold can
                carry small text
     tint       light washes of the brand, for calm section backgrounds       */
  --brand-primary: #17478A;
  --brand-primary-hover: #0F3266;
  --brand-deep: #1B294A;
  /* The logo red is #EA2331, and that is still the red in the logo files.
     It is NOT the red used for text or behind text, because it measures
     4.39:1 against white in both directions – below the 4.5:1 WCAG AA needs
     for normal-size text, and the red carries text in three places: the
     primary button (white on red), the "Apply" link on a job row (red on
     white), and the required-field marker. None of them qualifies as large
     text; the button tops out at 18px, and 14pt bold is 18.66px.

     #D81E2B measures 5.07:1 both ways. The shift is small enough to read as
     the same red beside the logo and large enough to clear AA with headroom.

     Precedent: the design phase darkened --brand-support from #B89A0A to
     #7D6800 for exactly this reason, after two audits measured the old value
     at about 2.7:1. Same problem, same answer.

     Decorative red – the eyebrow rule, the nav underline, the accordion
     marker – is a UI element rather than text and needs 3:1, which the logo
     red also clears. Those all read this token too, so they simply inherit
     the safer value rather than needing a second one. */
  --brand-accent: #D81E2B;
  --brand-accent-hover: #C21824;
  --brand-highlight: #F9DE3B;
  --brand-support: #7D6800;
  --brand-support-hover: #5E4E00;
  /* Gold on a navy ground measures well clear of AA – the light-ground caution
     above does not apply, so the display gold is correct here. */
  --brand-support-on-dark: #F9DE3B;
  /* Gold as a HAIRLINE on a light ground. `--brand-highlight` is too bright for
     a 1–2px rule sitting beside a gold-tinted fill, and `--brand-support` is a
     text colour, far too dark for a rule. The kit already carries this exact
     value inline in `.callout--gold`; naming it here is what lets a section
     stop repeating the literal. */
  --brand-highlight-line: #E8D46A;
  --brand-tint: #D1DCEC;
  --brand-tint-soft: #E4EBF4;
  --brand-tint-faint: #F1F5FA;
  --accent-tint: #FCE6E8;
  --highlight-tint: #FEF7D8;

  /* --- Surfaces and ink --------------------------------------------------
     surface      default page background
     surface-alt  the banded background that separates one section from the next
     ink          body text. Near-navy, never pure black
     ink-muted    secondary text
     ink-faint    tertiary text and icon strokes. This is the floor on
                  --surface, do not lighten it                                */
  --surface: #FFFFFF;
  --surface-alt: #F4F6FA;
  --ink: #141E33;
  --ink-muted: #3E4A61;
  --ink-faint: #68748B;
  --hairline: #DFE5EE;
  --hairline-soft: #EBF0F6;

  /* Pure white. Structural rather than palette: text and card surfaces on the
     blue and navy grounds. NOT the same thing as --surface, even though they
     currently share a value – --surface is the page background and can be
     re-toned, this cannot. */
  --white: #fff;

  /* --- Typography --------------------------------------------------------
     Display: Archivo – confident grotesque, echoes the bold FINAS wordmark.
     Body: Inter – highly legible, matches the FINAS document suite.
     Per-language overrides land with the multilingual layer, via :lang():
       ja: "Noto Sans JP" · zh: "Noto Sans SC" · ar: "Noto Sans Arabic" + RTL */
  --font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Reference codes, and only reference codes: the DMW licence number on the
     About card. It is read character by character and copied into government
     forms, so a face that cannot confuse 0 with O is doing real work. A system
     stack, because loading a webfont for one string would be indefensible. */
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* Fluid type scale */
  --text-xs: 0.8125rem;                                       /* 13px */
  --text-s: 0.9375rem;                                        /* 15px */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);        /* 16 → 18px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);     /* 18 → 21px */
  --text-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --text-2xl: clamp(1.7rem, 1.35rem + 1.6vw, 2.5rem);
  --text-3xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --text-hero: clamp(2.6rem, 1.4rem + 5.2vw, 5.2rem);

  --leading-tight: 1.06;
  --leading-snug: 1.25;
  --leading-body: 1.65;
  --tracking-wide: 0.14em;

  /* --- Spacing – 8px base scale ------------------------------------------ */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 7rem;

  /* Section block spacing (fluid) */
  --section-space-s: clamp(3rem, 2rem + 4vw, 5rem);
  --section-space-m: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
  --section-space-l: clamp(5rem, 3rem + 7vw, 9.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --container: 1240px;
  --container-narrow: 880px;
  --space-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* --- Radii – confident, not bubbly ------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* --- Shadows – navy-tinted, never grey mud ----------------------------- */
  --shadow-sm: 0 2px 10px rgba(23, 71, 138, 0.06);
  --shadow-md: 0 14px 40px rgba(23, 71, 138, 0.10);
  --shadow-lg: 0 22px 60px rgba(23, 71, 138, 0.14);
  --shadow-brand: 0 12px 34px rgba(23, 71, 138, 0.22);
  --shadow-accent: 0 12px 30px rgba(216, 30, 43, 0.24);
  --shadow-brand-strong: 0 16px 40px rgba(23, 71, 138, 0.30);
  --shadow-accent-strong: 0 16px 40px rgba(216, 30, 43, 0.32);
  --shadow-highlight: 0 14px 34px rgba(249, 222, 59, 0.35);
  --shadow-on-dark: 0 16px 40px rgba(0, 0, 0, 0.18);
  --shadow-header: 0 4px 24px rgba(23, 71, 138, 0.06);

  /* --- Motion ------------------------------------------------------------ */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 640ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Translucency over the blue and navy grounds ------------------------
     Written once here rather than as an rgba() literal in twenty section
     files. The design leans on white at a fixed set of opacities and nothing
     else, so naming them is what stops a section inventing another.        */
  --on-dark-strong: rgba(255, 255, 255, 0.88);
  --on-dark: rgba(255, 255, 255, 0.85);
  --on-dark-body: rgba(255, 255, 255, 0.82);
  --on-dark-muted: rgba(255, 255, 255, 0.72);
  --on-dark-faint: rgba(255, 255, 255, 0.38);
  --on-dark-surface: rgba(255, 255, 255, 0.08);
  --on-dark-surface-soft: rgba(255, 255, 255, 0.06);
  --on-dark-surface-hover: rgba(255, 255, 255, 0.16);
  --on-dark-hairline: rgba(255, 255, 255, 0.16);
  --on-dark-hairline-soft: rgba(255, 255, 255, 0.12);
  --on-dark-arc: rgba(249, 222, 59, 0.20);
  /* The same dashed route arc where it has to read as a divider rather than a
     decoration: the rail joining steps on a navy band, and the line between two
     glass panels. Twice the opacity of --on-dark-arc, deliberately. */
  --on-dark-arc-strong: rgba(249, 222, 59, 0.40);
  --on-dark-glow: rgba(249, 222, 59, 0.12);

  /* --- Gold at low alpha, over a LIGHT ground -----------------------------
     The mirror of --on-dark-arc, for the same dashed gold marks where they sit
     on a white card or over a photograph instead of on navy. `wash` is the
     offset "certificate" layer behind the licence card; `arc` is the dashed
     seal on it and the dashed marker rings in a hero. Neither is ever a text
     colour – that is --brand-support and nothing else.                      */
  --brand-highlight-wash: rgba(249, 222, 59, 0.14);
  --brand-highlight-arc: rgba(249, 222, 59, 0.55);

  /* --- Photo scrim -------------------------------------------------------
     The two stops of the navy-to-blue wash laid over a photograph so white
     text on top of it clears AA whatever the photograph turns out to be. The
     kit already carries this pair inline in `.page-hero--photo`; naming it is
     what stops the employer panel on the homepage and the one on Partners
     each inventing their own opacity.                                       */
  --photo-scrim-start: rgba(27, 41, 74, 0.94);
  --photo-scrim-end: rgba(15, 50, 102, 0.90);

  /* --- Border widths -----------------------------------------------------
     Three, and the design uses no others: the hairline around cards, chips and
     panels; the heavier rule the dashed route marks and the form fields are
     drawn at; and the accent rule that tops the licence card. Named so a
     section cannot quietly introduce a fourth.                              */
  --border-hairline: 1px;
  --border-rule: 1.5px;
  --border-accent: 4px;

  /* --- Chrome ------------------------------------------------------------ */
  --header-blur: saturate(150%) blur(14px);
  --header-surface: rgba(255, 255, 255, 0.86);
  --footer-ink: #B9C4DA;
  --footer-ink-muted: #8291B3;
  --footer-tagline: #93A2C2;
  --sticky-offset: 104px;
}

/* ---------------------------------------------------------------------------
 * BUTTON COMPONENT TOKENS
 *
 * The mock-ups hardcode these inside the .btn rule, which means Theme Settings
 * has nothing to override and every button silently opts out of the design
 * system. The values below are lifted from the signed-off design unchanged, so
 * rendering is byte-for-byte identical – this only gives them a name.
 *
 * Padding is deliberately NOT exposed in Theme Settings. The 48px minimum tap
 * target is an accessibility floor, not a preference, and a client dragging a
 * padding slider is the fastest way to drop below it.
 * ------------------------------------------------------------------------- */
:root {
  --btn-radius: var(--radius-pill);
  --btn-padding-block: 0.9rem;
  --btn-padding-inline: 1.8rem;
  --btn-min-height: 48px;
  --btn-font-size: var(--text-base);
  --btn-font-weight: 700;
  --btn-font-weight-secondary: 700;
  --btn-text-transform: none;
  --btn-letter-spacing: 0;
  --btn-border-width: 1.5px;
}

/* ---------------------------------------------------------------------------
 * LAYER 2 – THE FINAS ALIAS LAYER
 *
 * The names `pages.css` and the 20 approved mock-ups are written against.
 * Every one is `var(--role)`. If you find yourself wanting to put a literal
 * in this block, the value belongs in Layer 1 instead.
 * ------------------------------------------------------------------------- */
:root {
  /* Colour */
  --blue: var(--brand-primary);
  --blue-deep: var(--brand-primary-hover);
  --navy: var(--brand-deep);
  --red: var(--brand-accent);
  --red-deep: var(--brand-accent-hover);
  --gold: var(--brand-highlight);
  --gold-deep: var(--brand-support);
  --gold-line: var(--brand-highlight-line);
  --gold-wash: var(--brand-highlight-wash);
  --gold-arc: var(--brand-highlight-arc);
  --blue-tint-20: var(--brand-tint);
  --blue-tint-10: var(--brand-tint-soft);
  --blue-tint-05: var(--brand-tint-faint);
  --red-tint-10: var(--accent-tint);
  --gold-tint-15: var(--highlight-tint);
  --paper: var(--surface);
  --cloud: var(--surface-alt);
  --ink-soft: var(--ink-muted);
  --line: var(--hairline);
  --line-soft: var(--hairline-soft);
  /* --ink and --ink-faint carry the same name and the same role in both
     systems, so they are declared once in Layer 1 and need no alias. */

  /* Type */
  --display: var(--font-heading);
  --body: var(--font-body);
  --mono: var(--font-mono);

  /* Space. The mock-ups use the numeric scale; the section-architecture skill
     uses the t-shirt names. Same values, so both resolve here. */
  --space-xs: var(--s-1);
  --space-s: var(--s-2);
  --space-m: var(--s-3);
  --space-l: var(--s-5);
  --space-xl: var(--s-6);
  --gutter: var(--space-gutter);
  --container-width: var(--container);

  /* Radius */
  --r-s: var(--radius-sm);
  --r-m: var(--radius-md);
  --r-card: var(--radius-lg);
  --r-pill: var(--radius-pill);

  /* Shadow */
  --shadow-s: var(--shadow-sm);
  --shadow-m: var(--shadow-md);
  --shadow-lift: var(--shadow-lg);
  --shadow-blue: var(--shadow-brand);
  --shadow-red: var(--shadow-accent);

  /* Motion */
  --dur-fast: var(--duration-fast);
  --dur-normal: var(--duration-normal);
  --dur-slow: var(--duration-slow);
  --ease-out-expo: var(--ease-out);
}