/* Hello by X24: the brand tokens (direction "sign", rolled out 2026-10-24). Signwriting and van livery: white
   ground, enamel black, coach red, gold leaf on black. The site reads these; portal/src/app/globals.css and the
   email builders take the same values. Nobody types a hex or a font name anywhere else.

   Rollout fixes from the gate (scratchpad gate/sign/VERDICT-1.md, item 8, and rollout-sign.md):
   - One radius, 0, everywhere.
   - Red only ever means "this rings someone" (Ring Jess, Ring Sarah back), or "fix this now" on a form field in
     error (gate round 4, design critic: one error look in both modes). Urgent and On air are black and gold.
   - Dark mode keeps the ring buttons red; gold is trim only. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; licences in fonts/) ---------- */
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap;
  src: url("/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-display: swap;
  src: url("/fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
  src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap;
  src: url("/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: italic; font-display: swap;
  src: url("/fonts/barlow-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap;
  src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap;
  src: url("/fonts/barlow-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* ---------- The paints ---------- */
  --duco-white: #FFFFFF;  /* the van: the page */
  --sign-black: #1C1814;  /* warm enamel black: text, rules, sign panels, the plain buttons */
  --coach-red:  #B3261B;  /* the favicon plate, and the one signal: a button that rings someone */
  --gold-leaf:  #E0AE45;  /* only ever on black: keylines, On air, Urgent */
  --primer:     #57514A;  /* secondary text (a step stronger after gate round 1) */
  --night:      #14110E;  /* the fascia after dark */
  --chalk:      #F2EDE4;  /* text after dark */

  /* ---------- Roles ---------- */
  --c-bg: var(--duco-white);
  --c-text: var(--sign-black);
  --c-muted: var(--primer);
  --c-rule: #DCD8D3;
  --c-field: #F4F3F1;
  --c-btn: var(--sign-black);         /* every primary button that isn't a ring */
  --c-on-btn: var(--duco-white);
  --c-btn-press: #3A332D;
  --c-ring: var(--coach-red);         /* Ring Jess, Ring Charlie, Ring Priya back. Nothing else. */
  --c-on-ring: var(--duco-white);
  --c-ring-press: #8F1E15;
  --c-panel: var(--sign-black);
  --c-on-panel: var(--duco-white);
  --c-panel-muted: #B5ADA2;
  --c-panel-rule: #3A332D;
  --c-trim: var(--gold-leaf);
  --c-card-rule: var(--sign-black);  /* the hero card's inner rule; gold after dark */
  --c-focus: var(--sign-black);       /* gold on white is 1.9:1, below the 3:1 a focus ring needs, so ink in light */
  --c-error: var(--coach-red);        /* a field in error: border, line and "!" (gate round 4) */
  --c-on-error: var(--duco-white);
  --c-wm-word: var(--sign-black);    /* the wordmark is ink, reversed after dark (gate, 2026-10-24): the red H plate is icons only */
  --c-wm-by: var(--sign-black);

  /* ---------- Type ---------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.8125rem;   /* 13 */
  --t-sm: 0.9375rem;   /* 15 */
  --t-md: 1.0625rem;   /* 17 */
  --t-lg: 1.25rem;     /* 20 */
  --t-xl: 1.75rem;     /* 28 */
  --t-2xl: 2.5rem;     /* 40 */
  --t-3xl: 3.5rem;     /* 56 */
  --lh-tight: 0.92;
  --lh-body: 1.5;
  --measure: 34em;

  /* ---------- Space (4 px grid) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 16px;
  --tap: 52px;

  /* ---------- Shape ---------- */
  --radius: 0;         /* one radius, everywhere */
  --border: 2px;
  --rule: 1px;
  --rule-heavy: 3px;
  --keyline: 7px;      /* the gold line's inset on a plate; outline on a square box mitres its corners */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: var(--night); --c-text: var(--chalk); --c-muted: #C4BCB0; --c-rule: #3A332D; --c-field: #211C18;
    --c-btn: var(--chalk); --c-on-btn: var(--night); --c-btn-press: #D9D2C6;
    --c-ring-press: #C42D21;
    --c-panel: #2C2520; --c-on-panel: var(--chalk); --c-panel-muted: #C4BCB0; --c-panel-rule: #4A4037;
    --c-card-rule: var(--gold-leaf);
    --c-focus: var(--gold-leaf); --c-wm-word: var(--duco-white); --c-wm-by: var(--duco-white);
    --c-error: #F07B6E; --c-on-error: var(--night);
  }
}
:root[data-theme="dark"] {
  --c-bg: var(--night); --c-text: var(--chalk); --c-muted: #C4BCB0; --c-rule: #3A332D; --c-field: #211C18;
  --c-btn: var(--chalk); --c-on-btn: var(--night); --c-btn-press: #D9D2C6;
  --c-ring-press: #C42D21;
  --c-panel: #2C2520; --c-on-panel: var(--chalk); --c-panel-muted: #C4BCB0; --c-panel-rule: #4A4037;
  --c-card-rule: var(--gold-leaf);
  --c-focus: var(--gold-leaf); --c-wm-word: var(--duco-white); --c-wm-by: var(--duco-white);
  --c-error: #F07B6E; --c-on-error: var(--night);
}

/* Contrast (WCAG 2.x). AA is 4.5:1 for text.
   Light  ink on white 17.65 · primer #57514A on white 7.83 · white on coach red 6.54 · white on ink 17.65
          gold on ink 8.66 · panel-muted on ink 7.95 · primer on field 7.06
   Dark   chalk on night 16.13 · dust #C4BCB0 on night 10.0 · night on chalk 16.13 · white on coach red 6.54
          white on ring hover #C42D21 5.5 · gold on panel #2C2520 7.4 · dust on panel 8.02 · chalk on panel 12.93
   (gate round 1: the dark panel is lifted to #2C2520 so it stands off the night page, and gold rules it.)
   Errors (gate round 4)  coach red on white 6.54 · #F07B6E on night 6.95 · night on #F07B6E 6.95
   Gold on white is 1.9 and is never used. */