/* =====================================================================
   Design tokens: the single source of truth for colour, type, space,
   radius and motion. Values are the owner-approved Event Job Site design
   (5 Nov 2026, docs/design): ink navy #13233A, marigold #F2A71B, warm
   off-white #FAF7F1, white cards, thin warm borders, Plus Jakarta Sans
   only (Bold 700 page headlines, SemiBold 600 headings/titles/figures/
   buttons, Regular 400 everything else, never 800).
   Never hard-code a colour, size or space anywhere else (app.css uses
   only these). Light is the default; Dark applies by choice
   (data-theme="dark") or by the device when the choice is System (no
   data-theme attribute). Marigold always carries navy text, never white.
   ===================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;   --lh-xs: 1.1rem;
  --text-sm: 0.875rem;  --lh-sm: 1.5rem;     /* meta: 14px on ~1.7 */
  --text-md: 1rem;      --lh-md: 1.6rem;
  --text-lg: 1.125rem;  --lh-lg: 1.6rem;     /* panel headings */
  --text-xl: 1.375rem;  --lh-xl: 1.8rem;     /* pay figure in the apply panel */
  --text-2xl: 1.875rem; --lh-2xl: 2.25rem;   /* page / hero headline (30px desktop) */
  --text-2xl-phone: 1.5rem; --lh-2xl-phone: 1.9rem;
  --text-stat: 2.5rem;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --card-pad: 1.25rem;  /* 20px */
  --card-gap: 0.875rem; /* 14px */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --content-max: 75rem;
  --sidebar-w: 17rem;
  --tap: 44px;
  --duration-fast: 120ms; --duration-base: 200ms;

  --color-canvas: #FAF7F1;
  --color-surface: #ffffff;
  --color-surface-2: #F3EEE4;          /* table heads, chips, quiet fills */
  --color-line: #E6E0D4;
  --color-line-strong: #CFC7B8;
  --color-text: #13233A;
  --color-text-muted: #5B6575;
  --color-accent: #0E6E73;             /* links */
  --color-accent-text: #13233A;        /* text on the marigold primary */
  --color-primary: #F2A71B;
  --color-primary-hover: #E09812;
  --color-secondary: #13233A;          /* navy buttons */
  --color-secondary-text: #FAF7F1;
  --color-focus: #13233A;
  --color-success: #1F7A4D;
  --color-warning: #A55A00;
  --color-danger: #B42318;
  --color-scrim: rgb(19 35 58 / 0.45);
  --shadow-panel: 0 10px 30px rgb(19 35 58 / 0.12);
  --shadow-sticky: 0 6px 20px rgb(19 35 58 / 0.08);

  /* hero band and sidebar (navy in both themes) */
  --color-band: #13233A;
  --color-band-text: #FAF7F1;
  --color-band-muted: #C9D0DA;
  --color-side: #13233A;
  --color-side-text: #FAF7F1;
  --color-side-muted: #B9C2CF;
  --color-side-active: #22395A;
  --color-side-line: rgb(250 247 241 / 0.16);

  /* status pills: the text label is always there; colour is the second signal */
  --pill-good-bg: #C4EBCF;  --pill-good-text: #0F4D2C;
  --pill-wait-bg: #C2E8E8;  --pill-wait-text: #08474A;
  --pill-warn-bg: #FADBA8;  --pill-warn-text: #633600;
  --pill-bad-bg: #FBE1DE;   --pill-bad-text: #8F1C13;
  --pill-quiet-bg: #EEEAE3; --pill-quiet-text: #4A5463;
  --pill-brand-bg: #F2A71B; --pill-brand-text: #13233A;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0E1A2B;
  --color-surface: #15253B;
  --color-surface-2: #1C304B;
  --color-line: #2A3E5B;
  --color-line-strong: #3D5476;
  --color-text: #FAF7F1;
  --color-text-muted: #B8C0CC;
  --color-accent: #7DD3D6;
  --color-accent-text: #13233A;
  --color-primary: #F2A71B;
  --color-primary-hover: #F6B73F;
  --color-secondary: #3E6AA8;
  --color-secondary-text: #FAF7F1;
  --color-focus: #FAF7F1;
  --color-success: #6FD39C;
  --color-warning: #F2C46B;
  --color-danger: #FF8A7E;
  --color-scrim: rgb(0 0 0 / 0.6);
  --shadow-panel: 0 10px 30px rgb(0 0 0 / 0.45);
  --shadow-sticky: 0 6px 20px rgb(0 0 0 / 0.35);
  --color-band: #0A1422;
  --color-band-muted: #B8C0CC;
  --color-side: #0A1422;
  --color-side-active: #1C304B;
  --pill-good-bg: rgb(111 211 156 / 0.16);  --pill-good-text: #8EE2B4;
  --pill-wait-bg: rgb(125 211 214 / 0.16);  --pill-wait-text: #9BE0E2;
  --pill-warn-bg: rgb(242 196 107 / 0.16);  --pill-warn-text: #F5CD82;
  --pill-bad-bg: rgb(255 138 126 / 0.16);   --pill-bad-text: #FFA59B;
  --pill-quiet-bg: rgb(250 247 241 / 0.08); --pill-quiet-text: #C9D0DA;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-canvas: #0E1A2B;
    --color-surface: #15253B;
    --color-surface-2: #1C304B;
    --color-line: #2A3E5B;
    --color-line-strong: #3D5476;
    --color-text: #FAF7F1;
    --color-text-muted: #B8C0CC;
    --color-accent: #7DD3D6;
    --color-accent-text: #13233A;
    --color-primary: #F2A71B;
    --color-primary-hover: #F6B73F;
    --color-secondary: #3E6AA8;
    --color-secondary-text: #FAF7F1;
    --color-focus: #FAF7F1;
    --color-success: #6FD39C;
    --color-warning: #F2C46B;
    --color-danger: #FF8A7E;
    --color-scrim: rgb(0 0 0 / 0.6);
    --shadow-panel: 0 10px 30px rgb(0 0 0 / 0.45);
    --shadow-sticky: 0 6px 20px rgb(0 0 0 / 0.35);
    --color-band: #0A1422;
    --color-band-muted: #B8C0CC;
    --color-side: #0A1422;
    --color-side-active: #1C304B;
    --pill-good-bg: rgb(111 211 156 / 0.16);  --pill-good-text: #8EE2B4;
    --pill-wait-bg: rgb(125 211 214 / 0.16);  --pill-wait-text: #9BE0E2;
    --pill-warn-bg: rgb(242 196 107 / 0.16);  --pill-warn-text: #F5CD82;
    --pill-bad-bg: rgb(255 138 126 / 0.16);   --pill-bad-text: #FFA59B;
    --pill-quiet-bg: rgb(250 247 241 / 0.08); --pill-quiet-text: #C9D0DA;
  }
}