/* Reeleyes design tokens. ONE source for both sites: the website (public/css/site.css) and BACKEND (backend/styles.css).
   This file lives in shared/; `npm run build` copies it to public/css/tokens.css and backend/tokens.css (like firebase-boot.js),
   and each page loads its copy before its own stylesheet. Edit shared/tokens.css only, then build.

   Layers, top to bottom:
     1. brand primitives  (--re-*)   the fixed Reeleyes colours and the two type stacks: never used directly in a rule,
     2. scales            (--t-*, --fs-*, --lh-*, --ls-*, --w-*, --s-*, --r-*, --dur-*, --ease*, --focus-*)
     3. UI roles          (--bg, --fg, --accent, ...)   what a rule reaches for; defined for light, redefined for dark.
   The website is black in both colour schemes and keeps its own short names (--k, --w, --y) mapped onto layer 1 in site.css.
   Documents (the invoice sheet, PDF previews) copy the RE FINAL INVOICE TEMPLATE and keep --re-gold-doc and Roboto.

   Contrast (WCAG 2.x, checked with scripts in audit/evidence/D1): every text role on every surface it is used on is 4.5:1
   or better in both themes; UI-only pairs (borders, bars) 3:1 where the border is the only thing that shows the control.
     light: --muted on --bg 5.3 · on --panel 5.9 · on --field 5.1 · --gold-text on --panel 6.3 · on --accent-soft 5.7
            --ok on --ok-soft 5.2 · --bad on --bad-soft 4.9 · --info on --info-soft 4.7 · --sync on --sync-soft 4.8
            --accent-ink on --accent 13.8 · --bar-fg-2 on --bar 8.2 (on --bar-panel 7.7) · --bar-muted on --bar 6.2 (on --bar-panel 5.5, on --bar-field 5.0) · --bar-line-strong on --bar 3.1
     dark:  --muted on --bg 6.3 · on --panel 5.9 · on --field 5.5 · --gold-text on --panel 13.9 · --ok on --ok-soft 7.3
            --bad on --bad-soft 6.5 · --info on --info-soft 7.1 · --sync on --sync-soft 8.8
   Never put --accent (the yellow) under text on a light surface: use --gold-text. */

:root {
  /* ---- 1. brand primitives ---- */
  --re-black: #0a0a0a;         /* the brand black: the website's ground, the top bar, the sign-in screen, dark-theme panels */
  --re-true-black: #000000;    /* dark-theme page ground and the invoice band only */
  --re-white: #ffffff;
  --re-paper: #f2f2f0;         /* the website's "white" and the light-theme page ground: warm, never pure */
  --re-yellow: #ffd500;        /* the brand yellow (the website's band, the primary button, the current step) */
  --re-yellow-deep: #7a5c00;   /* the same hue dark enough to read as text on a light surface (6.3:1 on white) */
  --re-yellow-tint: #fff6c2;   /* a wash of the yellow for highlighted rows and boxes on light */
  --re-yellow-tint-dark: #241f00;
  --re-gold-doc: #f1c232;      /* the invoice template's gold: documents and PDFs only, never the interface */
  /* warm neutrals, light to dark */
  --re-n-100: #f0efea;
  --re-n-200: #e3e1d9;
  --re-n-300: #c9c7bf;
  --re-n-400: #a8a7a1;         /* grey text on black (8.2:1) */
  --re-n-500: #8c8b86;         /* grey text on black (6.2:1), dark-theme secondary text */
  --re-n-600: #66655f;         /* light-theme secondary text (5.9:1 on white) */
  --re-n-650: #5c5c58;         /* a control outline on black (3.1:1) */
  --re-n-700: #3a3a38;
  --re-n-800: #262626;
  --re-n-850: #1e1e1e;
  --re-n-900: #141414;
  /* status hues: a dark pair for light surfaces, a light pair for dark surfaces */
  --re-green-700: #137333; --re-green-100: #e6f4ea; --re-green-300: #81c995; --re-green-900: #15301e;
  --re-red-700: #c5221f;   --re-red-100: #fce8e6;   --re-red-300: #ff8a7a;   --re-red-900: #3c1b19;   --re-red-600: #d93025;
  --re-blue-700: #1967d2;  --re-blue-100: #e8f0fe;  --re-blue-300: #8ab4f8;  --re-blue-900: #172840;
  --re-sky-700: #0a6fa8;   --re-sky-100: #e1f3fd;   --re-sky-300: #7fd0ff;   --re-sky-900: #10293a;
  --re-slate-600: #5f6368; --re-slate-100: #f1f3f4; --re-slate-300: #b0b3b8; --re-slate-900: #2a2b2d;
  --re-amber-300: #ffb74d;                           /* a warning on black */
  --re-gold-700: #9c7000;                            /* chart bars on white (4.4:1) */
  --re-gain: #b58900; --re-loss: #cc3d63; --re-gain-dark: #ad8600; --re-loss-dark: #e0507a;   /* profit charts, validated both themes */
  /* type: one family for both sites (Matthew, design pause). Archivo, a variable grotesk with a width axis (62 to 125%),
     is the website's display face at 125% and both sites' reading and interface face at 100%; Space Mono is every small
     label, code and figure caption. Both load from Google Fonts (no font files in the repo); each page links the same
     stylesheet. Documents keep Roboto, the invoice template's face. */
  --font-brand: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-brand-mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --font-site-display: var(--font-brand);
  --font-site-text: var(--font-brand);
  --font-site-mono: var(--font-brand-mono);
  --font-app: var(--font-brand);
  --font-app-mono: var(--font-brand-mono);
  --font-doc: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --t-input-touch: 16px;   /* a text field on a touch screen: under 16px iOS Safari zooms the page on focus */

  /* ---- 2. scales ---- */
  /* fixed type sizes (the app's dense register). Ten steps; nothing in between. */
  --t-2xs: 10px;   /* mono captions under figures, axis ticks: the floor */
  --t-xs: 11px;    /* uppercase labels, chips, meta */
  --t-sm: 12px;    /* hints, secondary lines, pills */
  --t-base: 13px;  /* data rows, table cells, buttons */
  --t-md: 15px;    /* body text, inputs, card titles */
  --t-lg: 18px;    /* dialog titles, client names, small figures */
  --t-xl: 24px;    /* key figures, project names in lists */
  --t-2xl: 28px;   /* large figures, dialog headlines (DESIGN.md: 28; the app's big sizes were 26/28/30) */
  --t-3xl: 40px;   /* screen titles */
  --t-4xl: 64px;   /* display: the Projects heading, a project's name */
  /* fluid type (both sites). Each clamps between two steps of the fixed scale. */
  --fs-sm: clamp(13px, 0.79rem + 0.1vw, 14px);       /* website small text */
  --fs-body: clamp(17px, 1rem + 0.25vw, 19px);        /* website reading text */
  --fs-lead: clamp(20px, 1rem + 1vw, 30px);           /* website lead, card titles */
  --fs-head: clamp(32px, 0.8rem + 4.6vw, 84px);       /* website section heads */
  --fs-figure: clamp(24px, 2.6vw, 32px);              /* app: a key figure in a tile */
  --fs-figure-sm: clamp(20px, 2.2vw, 28px);           /* app: a figure in a band of five or six */
  --fs-title: clamp(26px, 3.4vw, 40px);               /* app: the greeting, a tool's name */
  --fs-display: clamp(34px, 5.2vw, 56px);             /* app: a screen title (Ledger, Analytics) */
  --fs-mega: clamp(44px, 8vw, 76px);                  /* app: the Projects heading, a project's name, the sign-in mark */
  /* leading */
  --lh-display: .86;   /* display caps: the Archivo and Geist caps have no descenders, so they sit tight */
  --lh-tight: 1.05;    /* titles and figures */
  --lh-snug: 1.25;     /* two-line labels, table cells */
  --lh-body: 1.45;     /* app body */
  --lh-read: 1.5;      /* website reading text, document text */
  /* tracking */
  --ls-display: -.03em;   /* 32px and up */
  --ls-tight: -.02em;     /* 18 to 31px */
  --ls-caps: .08em;       /* uppercase mono labels */
  --ls-caps-wide: .14em;  /* chips and the brand sub-line */
  --ls-caps-site: .02em;  /* the website's labels (Space Mono is already wide) */
  /* weights */
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-heavy: 800; --w-black: 900;
  /* spacing: a 4px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --gutter: clamp(16px, 2.2vw, 32px);                 /* the page margin, and the padding inside a website box */
  --gutter-app: max(16px, env(safe-area-inset-left, 0px));   /* the app's side gutter (16, more inside a phone's notch) */
  --gutter-app-r: max(16px, env(safe-area-inset-right, 0px));
  --measure-x: 1480px;                                /* the app's content width */
  /* corners: the website is square; the app rounds on the 4px grid */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  /* rules */
  --rule-w: 3px;                                      /* the website's rule weight */
  /* shadow: only on what floats (a dialog, a tooltip, the invoice sheet on its desk) */
  --shadow-float: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 34px -14px rgba(0, 0, 0, .28);
  --shadow-float-dark: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -16px rgba(0, 0, 0, .8);
  /* motion: four durations, two curves. Only opacity and transform move. */
  --dur-1: 150ms;   /* hover, press */
  --dur-2: 240ms;   /* open, close, fade */
  --dur-3: 400ms;   /* a screen's entrance, a staggered list */
  --dur-4: 800ms;   /* the website's title rising, a page wipe */
  --ease: cubic-bezier(.2, .8, .2, 1);        /* the app: soft */
  --ease-hard: cubic-bezier(.7, 0, .2, 1);    /* the website: hard in, hard out */
  /* focus: one ring on everything you can press or type in */
  --focus-w: 2px; --focus-offset: 2px;

  /* ---- 3. UI roles, light ---- */
  --bg: var(--re-paper);
  --panel: var(--re-white);
  --field: var(--re-n-100);
  --fg: #0b0b0b;
  --muted: var(--re-n-600);
  --line: var(--re-n-200);
  --line-strong: #8a8983;          /* a border that must read on its own (3.5:1 on white, 3.1:1 on --bg) */
  --accent: var(--re-yellow);
  --accent-ink: #0b0b0b;
  --accent-soft: var(--re-yellow-tint);
  --gold-text: var(--re-yellow-deep);
  --focus: var(--re-yellow-deep);
  --ok: var(--re-green-700);  --ok-soft: var(--re-green-100);
  --bad: var(--re-red-700);   --bad-soft: var(--re-red-100);
  --danger: var(--bad);            /* one red: --danger stays as a name for the delete buttons */
  --info: var(--re-blue-700); --info-soft: var(--re-blue-100);
  --sync: var(--re-sky-700);  --sync-soft: var(--re-sky-100);
  --idle: var(--re-slate-600); --idle-soft: var(--re-slate-100);
  --chart-bar: var(--re-gold-700);
  --pf-gain: var(--re-gain); --pf-loss: var(--re-loss);
  --badge: var(--re-red-600); --badge-fg: var(--re-white);
  --shadow: var(--shadow-float);
  /* the black band (top bar, sign-in screen, the website's chrome): the same in both themes */
  --bar: var(--re-black);
  --bar-fg: var(--re-white);
  --bar-fg-2: var(--re-n-400);     /* a sentence on the band */
  --bar-muted: var(--re-n-500);    /* a label on the band */
  --bar-line: var(--re-n-700);     /* a hairline on the band */
  --bar-line-strong: var(--re-n-650);   /* an outlined control on the band */
  --bar-panel: var(--re-n-900);    /* a card on the band: one step up from the one black */
  --bar-field: var(--re-n-850);    /* a field on such a card: one step more */
  --bar-ok: var(--re-yellow);
  --bar-warn: var(--re-amber-300);
  --bar-bad: var(--re-red-300);
  /* crew-portal step colours (each step its own hue; colour-blind checked) */
  --cs-1: #1baf7a; --cs-2: #2a78d6; --cs-3: #e34948; --cs-4: #6250d6; --cs-5: #eda100;
}

/* ---- 3. UI roles, dark ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--re-true-black); --panel: var(--re-black); --field: var(--re-n-900); --fg: #e9e9e9; --muted: var(--re-n-500);
    --line: var(--re-n-850); --line-strong: var(--re-n-650);
    --accent: var(--re-yellow); --accent-ink: #0b0b0b; --accent-soft: var(--re-yellow-tint-dark); --gold-text: var(--re-yellow); --focus: var(--re-yellow);
    --ok: var(--re-green-300); --ok-soft: var(--re-green-900); --bad: var(--re-red-300); --bad-soft: var(--re-red-900);
    --info: var(--re-blue-300); --info-soft: var(--re-blue-900); --sync: var(--re-sky-300); --sync-soft: var(--re-sky-900);
    --idle: var(--re-slate-300); --idle-soft: var(--re-slate-900); --chart-bar: var(--re-yellow);
    --pf-gain: var(--re-gain-dark); --pf-loss: var(--re-loss-dark);
    --shadow: var(--shadow-float-dark);
    --cs-1: #199e70; --cs-2: #3987e5; --cs-3: #e66767; --cs-4: #9085e9; --cs-5: #c98500;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--re-true-black); --panel: var(--re-black); --field: var(--re-n-900); --fg: #e9e9e9; --muted: var(--re-n-500);
  --line: var(--re-n-850); --line-strong: var(--re-n-650);
  --accent: var(--re-yellow); --accent-ink: #0b0b0b; --accent-soft: var(--re-yellow-tint-dark); --gold-text: var(--re-yellow); --focus: var(--re-yellow);
  --ok: var(--re-green-300); --ok-soft: var(--re-green-900); --bad: var(--re-red-300); --bad-soft: var(--re-red-900);
  --info: var(--re-blue-300); --info-soft: var(--re-blue-900); --sync: var(--re-sky-300); --sync-soft: var(--re-sky-900);
  --idle: var(--re-slate-300); --idle-soft: var(--re-slate-900); --chart-bar: var(--re-yellow);
  --pf-gain: var(--re-gain-dark); --pf-loss: var(--re-loss-dark);
  --shadow: var(--shadow-float-dark);
  --cs-1: #199e70; --cs-2: #3987e5; --cs-3: #e66767; --cs-4: #9085e9; --cs-5: #c98500;
  color-scheme: dark;
}

/* less motion: every duration token collapses, so anything timed by a token stops at once. Each stylesheet still stops
   its keyframe animations itself (an infinite loader keeps a still state instead). */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}