/* =============================================================================
   UORA design tokens
   web/assets/css/tokens.css — imported first by every page, before base.css.

   The system is the PLM brand system (BRAND_GUIDELINES.md sections 1-8) with the
   warm-gold accent family replaced by a blue family, per build plan section 15
   [DECISION: Tomas]. Everything else — the five-step surface ramp, the three-step
   warm-ink text ramp, the three hairline steps, the type system, the component
   metrics — is carried over unchanged, because it is product-agnostic and because
   markup harvested from PLM must keep resolving.

   Two surfaces exist and only two:

     1. The product surface (dark). Every UORA screen: public site, claimant
        portal, respondent case page, arbitrator console, admin console. There is
        no light-mode toggle.
     2. The document surface (light), scoped by [data-surface="document"]. Awards,
        decisions, certificates, receipts and their on-screen previews. Legal
        documents are printed and filed, so they are light-on-white, not the dark
        UI palette — the pilot documents were plain white.

   Rules that are not negotiable:
     - Pure black (#000000) and pure white (#FFFFFF) never appear as a colour.
     - Colour is never decorative. The accent carries all emphasis; semantic
       colours exist only to communicate state.
     - Money and case numbers are tabular-nums with zero tracking.
     - No orange, purple, pink or teal; no cross-hue gradients.
   ============================================================================= */

/* ---------------------------------------------------------------- palette
   EVERY colour below traces to UORA_Brand_Identity_Guidelines_v1.0 section 03.
   The brand ships exactly these and no others:

     Obsidian 950 #080B0F   Carbon 900 #0D1117   Graphite 800 #161B22
     Slate        #232A32   Paper      #F5F3EF   White       #FFFFFF
     Ink          #17191D   Muted      #9CA2AA
     Aurum 500    #E7B66F   Aurum 300  #F2D19B   Aurum 700   #C88737
     success #1AB680  warning #F2B84B  danger #F26B6B  info #5EA7FF

   A tone between two of these is that colour at reduced opacity, never a new
   hex. Three invented greys had already crept in — #1A2029, #7C838C, #6E737B —
   and a page audit found them painted 29 times between them.

   p13 also fixes the balance: 70% Obsidian/Carbon canvas, 20% Paper/White for
   text and documents, 10% Aurum. Gold is never body text.
   ------------------------------------------------------------------------ */
:root {
  /* ---------------------------------------------------------------- surfaces
     A ramp, not a palette. Elevation steps up the ramp; it is not expressed by
     shadow alone. canvas -> chrome -> card -> input/hover -> pressed. */
  --bg: #080B0F;    /* Obsidian — root canvas, the "page" colour */
  --bg-1: #0D1117;  /* Carbon — nav bars, sticky headers, bottom of the card gradient */
  --bg-2: #161B22;  /* Graphite — card backgrounds, modal surfaces, input background */
  --bg-3: #232A32;  /* Slate — inputs, secondary buttons, hover state of cards */
  --bg-4: #2E3742;  /* one step above Slate — pressed / active, raised pill backgrounds */

  /* ------------------------------------------------------------------ accent
     Replaces PLM's --gold #FAD7A0. Buttons, key numbers, focus rings, logo.
     --accent-rgb exists so the tinted variants can be derived at runtime; the
     baked rgba() literals below are kept as tokens so no component has to know
     the opacity ladder. */
  --accent: #E7B66F;                             /* Aurum */
  --accent-rgb: 231, 182, 111;
  --accent-deep: #C88737;                        /* Aurum Deep — hover / pressed accent fills */
  --accent-fill: var(--accent);                  /* background of a solid accent button */
  --accent-soft: rgba(231, 182, 111, .14);       /* tinted pill and badge backgrounds, focus glow */
  --accent-line: rgba(231, 182, 111, .32);       /* hairline around accent-tinted surfaces */
  --accent-shadow: rgba(231, 182, 111, .22);     /* drop shadow beneath a primary call to action */

  /* -------------------------------------------------------------------- ink
     Warm white, never pure white. --text3 is raised from PLM's #6D6862 to reach
     4.5:1 on the card surface: in an arbitration product a timestamp or a
     deadline placeholder is load-bearing text, not decoration. The original
     value is retained as --text3-quiet for genuinely incidental marks. */
  --text: #F5F3EF;        /* Paper */
  --text2: #9CA2AA;       /* Muted */
  --text3: rgba(156, 162, 170, .78);   /* Muted, stepped down */
  --text3-quiet: rgba(156, 162, 170, .58);
  --text-on-accent: #17191D;  /* Ink, on an Aurum fill */

  /* ------------------------------------------------------------------- lines */
  --border: rgba(35, 42, 50, .9);    /* Slate, softened: card edges, dividers, table rules */
  --border2: #232A32;                /* Slate: card hover, input borders, secondary button */
  --border3: rgba(156, 162, 170, .30); /* Muted, translucent: pressed and focused controls */

  /* -------------------------------------------------- semantic state colours
     Rare, never decorative. Each family has a readable value (used for text and
     chips), a deep value (hairlines and edges only — too dark to read), a soft
     tint (chip and button backgrounds) and a line value. */
  --ok: #1AB680;
  --ok-deep: #0F6E56;
  --ok-soft: rgba(26, 182, 128, .16);
  --ok-line: rgba(26, 182, 128, .34);

  --warn: #F2B84B;
  --warn-deep: #8A6416;
  --warn-soft: rgba(242, 184, 75, .14);
  --warn-line: rgba(242, 184, 75, .32);

  --danger: #F26B6B;
  --danger-deep: #A32D2D;
  --danger-soft: rgba(242, 107, 107, .12);
  --danger-line: rgba(242, 107, 107, .32);

  --neutral-soft: rgba(35, 42, 50, .55);
  --neutral-line: rgba(156, 162, 170, .26);

  /* ------------------------------------------------------------------- radii */
  --r-xs: 8px;      /* badges — one step under the chip radius */
  --r-sm: 10px;     /* chips and fields (guidelines p20) */
  --r-input: 10px;  /* form controls share the chip radius */
  --r: 14px;        /* compact rows, list rows */
  --r-md: 16px;     /* product cards — the default card radius (brand md) */
  --r-lg: 24px;     /* modal panels, hero panels */
  /* Buttons take the 16px card radius. The guidelines are explicit on p20:
     "Rounded corners are functional, not playful. Avoid pill-shaped cards and
     excessive softness." --r-pill survives ONLY for genuine pills — a status
     dot or a count badge — never for a button. */
  --r-pill: 999px;  /* status pills and count badges only, never buttons */
  --r-btn: 16px;    /* buttons: the brand's button/card step */

  /* ----------------------------------------------------------------- shadows
     Composited over a near-black canvas, so the shade is a very dark neutral
     rather than #000 (pure black is banned, including in shadows). */
  /* p21: "1 px borders, no heavy shadows". Elevation is carried by the surface
     ramp and a hairline, not by a drop shadow. These are deliberately shallow;
     only a modal, which floats over everything, gets a real one. */
  --shadow-sm: 0 1px 2px rgba(3, 5, 8, .35);
  --shadow: 0 2px 8px rgba(3, 5, 8, .40);
  --shadow-lg: 0 8px 28px rgba(3, 5, 8, .50);
  --shadow-accent: 0 8px 24px var(--accent-shadow);

  /* -------------------------------------------------------------- typography
     Inter for body and UI (400-900), Inter Tight for display (600-800). Nothing
     else: no serif, no italic. Inter Tight 900 is deliberately absent — the
     loaded Inter Tight range stops at 800, and asking for 900 makes the browser
     synthesise a faux bold. Section heads use Inter Tight 800; the one marketing
     hero uses Inter 900. */
  --font-sans: 'Inter', 'Noto Sans Arabic', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* The brand names 'Inter Display'; Inter v4's variable file carries the
     display optical size, so one family serves both roles. */
  --font-display: 'Inter Display', 'Inter', 'Noto Sans Arabic', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* The brand ships three weights and only three (p16): Inter Variable Regular
     for body, Medium for UI, SemiBold for emphasis. p17 then assigns them:
     DISPLAY Regular, H1 Medium, H2 Medium, BODY Regular, LABEL Medium. The
     previous 700/800/900 were off-system and made every heading shout. */
  --fw-body: 400;
  --fw-label: 500;
  --fw-ui: 500;
  --fw-strong: 600;
  --fw-title: 500;
  --fw-hero: 400;

  /* Type scale, desktop-first. PLM's ladder is expressed in mobile-app sizes;
     the ratios and tracking are kept and the base is scaled up, except the
     micro-label, which does not scale. */
  /* The scale is the one published on p17 of the guidelines, which asks for
     LARGE hierarchy — "use large type-size contrast, disciplined spacing and
     few competing elements". The previous scale topped out at a 22px h1, which
     read as a dense dashboard rather than the intended system. */
  --fs-hero: clamp(44px, 6.5vw, 80px);   /* DISPLAY 64-80 */
  --fs-display: clamp(32px, 4.4vw, 56px);
  --fs-num-hero: clamp(32px, 4vw, 48px);
  --fs-h1: clamp(30px, 3.4vw, 44px);     /* H1 36-44 */
  --fs-h2: clamp(21px, 2vw, 28px);       /* H2 22-28 */
  --fs-h3: 18px;                          /* card title, top of the body range */
  --fs-lead: 18px;
  --fs-body: 16px;                        /* BODY 15-18 */
  --fs-body-sm: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;                       /* LABEL 11-13, uppercase */
  --fs-btn: 15px;
  --fs-btn-sm: 13px;

  /* Tracking: tighter as size increases; positive only on uppercase micro-labels;
     exactly zero on tabular figures so columns align. */
  /* p17, verbatim: DISPLAY -2%, H1 -1%, H2 0%, BODY 0%, LABEL +10-14%. */
  --tr-hero: -0.02em;
  --tr-display: -0.02em;
  --tr-title: -0.01em;
  --tr-card: 0;
  --tr-ui: 0;
  --tr-body: 0;
  --tr-micro: 0.10em;
  --tr-eyebrow: 0.14em;
  --tr-num: 0;

  /* p17: DISPLAY 0.98, H1 1.08, H2 1.15, BODY 1.5. */
  --lh-display: 0.98;
  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-ui: 1.35;
  --lh-body: 1.5;
  --lh-prose: 1.6;

  /* -------------------------------------------------------------- spacing
     4px base. Use the tokens rather than raw pixels so density can be tuned in
     one place — the app pages are dense and table-first. */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* -------------------------------------------------------------- layout */
  --shell-max: 1200px;      /* app shells and dense tables */
  --shell-wide: 1440px;     /* admin case boards */
  --shell-narrow: 760px;    /* public pages and long-form prose */
  --shell-pad: clamp(16px, 4vw, 32px);
  --header-h: 60px;
  --hairline: 1px;

  /* ------------------------------------------------------------- controls */
  /* p21: "48-52 px controls". A 40px control is a dashboard control, not this
     system's. Padding follows the 8px rhythm. */
  --control-h: 48px;
  --control-h-sm: 40px;
  --btn-pad: 0 24px;
  --btn-pad-sm: 0 16px;
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-ring: 0 0 0 3px var(--accent-soft);

  /* ------------------------------------------------------------ z-index
     One ladder, no ad-hoc values anywhere else. */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ------------------------------------------------------------ motion
     Short and functional. Motion never carries meaning on its own, because it is
     switched off wholesale under prefers-reduced-motion below. */
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ------------------------------------------------- PLM compatibility aliases
     Markup and snippets harvested from the PLM repo refer to --gold. Keeping the
     aliases means such a snippet renders in UORA blue rather than silently
     falling back to an unset value. Do not author new UORA rules against these. */
  --gold: var(--accent);
  --gold-deep: var(--accent-deep);
  --gold-soft: var(--accent-soft);
  --gold-line: var(--accent-line);
  --gold-shadow: var(--accent-shadow);
  --text-on-cream: var(--text-on-accent);
  --shadow-cream: var(--shadow-accent);
  --green: var(--ok-deep);
  --green2: var(--ok);
  --red: var(--danger-deep);
  --red2: var(--danger);
}

/* =============================================================================
   Document surface — light
   Scope: [data-surface="document"], applied either to <html> (a Puppeteer render
   of an award or a receipt) or to a container (a document preview embedded in a
   dark app page).

   This is NOT an inverted dark theme. Brand Aurum (#E7B66F) is unusable here:
   measured against Paper it is 1.67:1, and even Aurum Deep (#C88737) reaches
   only 2.72:1, so both fail even the 3:1 floor for large text. The document
   accent is therefore a deep Aurum, #8A5616, which keeps the brand family while
   actually carrying on an off-white page. Body ink is near-black on the brand
   Paper canvas so the page photocopies and files cleanly.

   Contrast, measured against Paper #F5F3EF: ink #17191D is 15.9:1;
   --accent #8A5616 is 5.5:1 and --text-on-accent #F7F7F5 over that same fill is
   5.7:1, so unlike the previous palette the accent here is safe for body prose
   as well as for rules, headings and figures.
   ============================================================================= */

[data-surface="document"] {
  --bg: #F5F3EF;   /* brand Paper */
  --bg-1: #FAF9F6;
  --bg-2: #FFFFFF;
  --bg-3: #EDEBE6;
  --bg-4: #E2DFD8;

  --accent: #8A5616;        /* deep Aurum — 5.5:1 on Paper */
  --accent-rgb: 138, 86, 22;
  --accent-deep: #6B4410;
  --accent-fill: #8A5616;
  --accent-soft: rgba(138, 86, 22, .10);
  --accent-line: rgba(138, 86, 22, .28);
  --accent-shadow: rgba(138, 86, 22, .16);

  --text: #17191D;          /* brand Ink */
  --text2: #4A4A46;
  --text3: #6E6E68;
  --text3-quiet: #86867F;
  --text-on-accent: #F7F7F5;

  --border: #DDDDD8;
  --border2: #C9C9C3;
  --border3: #AFAFA8;

  --ok: #0F6E56;
  --ok-deep: #0B5140;
  --ok-soft: rgba(15, 110, 86, .10);
  --ok-line: rgba(15, 110, 86, .28);

  --warn: #8A6416;
  --warn-deep: #63470F;
  --warn-soft: rgba(138, 100, 22, .10);
  --warn-line: rgba(138, 100, 22, .28);

  --danger: #A32D2D;
  --danger-deep: #7A2121;
  --danger-soft: rgba(163, 45, 45, .08);
  --danger-line: rgba(163, 45, 45, .26);

  --neutral-soft: rgba(26, 26, 26, .06);
  --neutral-line: rgba(26, 26, 26, .18);

  --shadow-sm: 0 1px 2px rgba(26, 26, 26, .08);
  --shadow: 0 6px 18px rgba(26, 26, 26, .10);
  --shadow-lg: 0 16px 40px rgba(26, 26, 26, .14);
  --shadow-accent: 0 6px 18px var(--accent-shadow);

  /* Documents are typeset, not laid out as an interface: prose leading, larger
     radii dropped, no pill buttons. */
  --r-md: 4px;
  --r: 4px;
  --r-sm: 3px;
  --r-lg: 6px;
  --lh-body: 1.6;
}

/* Motion is switched off wholesale rather than per-component, so a component
   author cannot forget. Durations become imperceptible instead of zero so that
   transitionend listeners still fire. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t: 0.01ms;
    --t-slow: 0.01ms;
  }
}