/* ==========================================================================
   BEL-AIR DESIGN SYSTEM — TOKENS (Mockup 02 · cinematic photography direction)

   Colour logic
   ─ The page is a dark cinema: near-black navy ground, warm white type.
   ─ Photography carries the colour. The old gradient-mesh palette survives
     only as LIGHT: soft glows that bleed from photographs into the page,
     colour washes behind headlines, the progress ribbon. Never as drawings.
   ─ The seal's blue remains the civic action colour (primary buttons, the
     emergency accent); the seal's yellow is the highlight colour.
   ========================================================================== */
:root {
  /* Ground */
  --night: #070B14;
  --night-2: #0C1220;
  --panel: #121A2B;
  --panel-2: #192338;
  --ink: #F3EFE6;
  --ink-2: rgba(243, 239, 230, .86);   /* secondary type — 12:1 on night */
  --ink-3: rgba(243, 239, 230, .72);   /* captions, labels — 7.8:1 on panel-2, the lightest ground (AAA) */
  --line: rgba(243, 239, 230, .12);
  --line-strong: rgba(243, 239, 230, .45);   /* control outlines — 3:1 on night */
  --white: #FFFDF8;

  /* Light palette — glows only */
  --glow-gold: #FFD23F;
  --glow-amber: #F4A21A;
  --glow-teal: #2BB3A3;
  --glow-leaf: #7FD17F;
  --glow-sky: #6FB6F0;
  --glow-rose: #F08A7B;

  /* Official seal colours — civic actions */
  --blue: #0000FF;
  --blue-ink: #0000C2;
  --blue-light: #8FB0FF;
  --on-blue: #FFFFFF;
  --yellow: #FFFF00;
  --gold: #FFD23F;

  /* Light washes used behind sections (CSS, not artwork) */
  --wash-gold: radial-gradient(60% 60% at 50% 50%, rgba(255, 210, 63, .22), transparent 70%);
  --wash-teal: radial-gradient(60% 60% at 50% 50%, rgba(43, 179, 163, .22), transparent 70%);
  --wash-leaf: radial-gradient(60% 60% at 50% 50%, rgba(127, 209, 127, .2), transparent 70%);
  --wash-sky: radial-gradient(60% 60% at 50% 50%, rgba(111, 182, 240, .2), transparent 70%);
  --grad-ribbon: linear-gradient(90deg, #2BB3A3, #7FD17F 50%, #FFD23F);

  /* Type */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-ui: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;

  /* Readers are 13 to 80: nothing renders under 14 px, sentences never under 16 px, body copy is 18 px. */
  --t-xs: .875rem;          /* 14 px — capitals labels only */
  --t-sm: 1rem;             /* 16 px — captions, card copy */
  --t-base: 1.125rem;       /* 18 px — body */
  --t-lg: 1.375rem;
  --t-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  /* Display sizes are written in --u, a rem that does not grow with the text size control (A / A+ / A++
     set --ts and the root size, see site.css): display type is already large and must still fit a phone. */
  --ts: 1;
  --u: calc(1rem / var(--ts));
  --t-2xl: clamp(2.1 * var(--u), 1.5 * var(--u) + 2.6vw, 3.6 * var(--u));
  --t-3xl: clamp(2.9 * var(--u), 1.6 * var(--u) + 5.2vw, 6.4 * var(--u));
  --t-hero: clamp(4.6 * var(--u), 1 * var(--u) + 15vw, 15 * var(--u));
  --lh-body: 1.6;
  --track-caps: .14em;

  /* Space, grid */
  --s-section: clamp(5rem, 3rem + 7vw, 11rem);
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --max: 92rem;
  --measure: 36rem;

  /* Motion — three levels */
  --d-micro: 220ms;
  --d-reveal: 800ms;
  --d-ambient: 12s;
  --ease-premium: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Surfaces */
  --r-ui: 4px;
  --r-photo: 6px;
  --hairline: 1px solid var(--line);
  --glass: rgba(12, 18, 32, .84);      /* dense enough that type on it never depends on the photograph behind */
  --glass-line: rgba(243, 239, 230, .14);

  --z-nav: 50; --z-panel: 80; --z-cursor: 100; --z-loader: 120;

  /* Inner-page body (text, tables, forms). Since 12 Oct 2026 it is the homepage's cinema, not a light page:
     the "paper" names are kept so every page re-themes from here. Every text colour holds 7:1 on --paper-2. */
  --paper: var(--night);           /* page ground */
  --paper-2: var(--panel);         /* cards, fields, tables (glass on photographs) */
  --paper-3: var(--night-2);       /* alternate band, table head */
  --ink-d: var(--ink);             /* text, 15:1 on panel */
  --ink-d2: var(--ink-2);          /* secondary text, 11:1 */
  --ink-d3: var(--ink-3);          /* labels and captions, 7.8:1 on panel-2 */
  --line-d: var(--line);
  --line-d-strong: var(--line-strong);   /* field and control outlines, 3:1 */
  --link-d: var(--blue-light);     /* links, 8.6:1 on panel */
  --focus-d: var(--gold);          /* focus ring, as on the homepage */

  /* Status colours on dark: light text on a faint tint of itself, the word always written, never colour alone.
     Each holds ≥ 7:1 on --panel with its tint. */
  --ok: #93E2A4;      --ok-bg: rgba(147, 226, 164, .09);     /* approved, valid, completed */
  --wait: #FFD27A;    --wait-bg: rgba(255, 210, 122, .09);   /* pending, in review */
  --more: #FFB38A;    --more-bg: rgba(255, 179, 138, .09);   /* more needed, action required */
  --bad: #FFA3A3;     --bad-bg: rgba(255, 163, 163, .09);    /* rejected, revoked, expired */
  --info: #A9C2FF;    --info-bg: rgba(169, 194, 255, .09);   /* information, reminders */
  --alert: #0000FF;                                           /* emergency advisories: the seal blue, as on the homepage */
}