/* RSAI marketing v2 — design tokens. Every colour, font, size and spacing value
   in the v2 layer comes from here; components never hard-code them.
   One style in both themes (square uppercase buttons, serif display, full-bleed photo);
   light is warm cream with ink buttons, dark is near-black with one sand accent.
   Theme is chosen by the boot script inline in <head>: ?theme=, else saved choice, else the
   visitor's clock (light 6 AM to 6 PM). */

:root {
  /* fonts (3 families) */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* type scale */
  --fs-label: 12px;
  --fs-small: 14px;
  --fs-body: 18px;
  --fs-lead: 20px;
  --fs-h4: 20px;
  --fs-h3: 28px;
  --fs-h2: 48px;
  --fs-h1: 72px;
  --fs-display-2: 64px;
  --fs-quote: 36px;
  --fs-stat: 44px;
  --lh-body: 1.5;
  --lh-tight: 1.08;
  --tracking-label: 0.08em;
  --tracking-display: -0.5px;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: 128px;
  --container: 1240px;
  --gutter: 32px;
  --nav-h: 72px;
  --promo-h: 40px;

  /* shape + motion */
  --radius-card: 12px;
  --radius-media: 16px;
  --radius-btn: 999px;
  --btn-h: 48px;
  --btn-px: 24px;
  --hairline-w: 1px;
  --accent-line: 2px;
  --ease: ease-in-out;
  --dur: 0.3s;
  --rise: 12px;

  /* Filled in each theme. The 2px accent line follows the theme colour. */


  /* style: the same in both themes (dark's square, uppercase buttons and serif display);
     the themes differ only in colour */
  --btn-radius: 4px;
  --btn-case: uppercase;
  --btn-tracking: 2px;
  --btn-size: 12px;
  --btn-weight: 500;
  --display-font: var(--font-serif);
  --display-weight: 400;
  --display-tracking: var(--tracking-display);
  --body-font: var(--font-sans);
  --label-font: var(--font-sans);
  --label-weight: 600;
  --label-tracking: 2px;
  --stat-font: var(--font-serif);
  --stat-weight: 400;
}

/* ── LIGHT ───────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  --bg: #FAF9F5;            /* = portal / admin light */
  --bg-rgb: 250, 249, 245;
  --surface: #EFECE3;        /* bands: 1.12:1 on bg (was #F3F1EA, 1.07). Mark 2026-10-22: "more delineation" */
  --surface-2: #FFFFFF;
  --text: #141413;
  --text-rgb: 20, 20, 19;
  --text-muted: #6B6A65;     /* portal --quiet: 5.14:1 on bg, 4.59:1 on surface */
  --hairline: #C8C1B2;            /* 1.70:1 on bg, so card and section edges read on cream (Mark, 2026-10-21 and 10-22: "more delineation"); was #D9D4C7, 1.40 */
  --button-bg: #141413;
  --button-text: #FAF9F5;
  --button-2-bg: transparent;
  --button-2-text: #141413;
  --button-2-border: rgba(20, 20, 19, 0.6);
  --button-3-border: rgba(20, 20, 19, 0.3);
  --accent: #141413;            /* light has no colour accent: markers and labels are ink */
  --brand-gradient: var(--accent);
  --on-accent: #FAF9F5;
  --label-color: var(--text-muted);
  --promo-bg: var(--surface);
  --promo-text: var(--text);
  --nav-bg: var(--bg);
  --overlay-strong: rgba(250, 249, 245, 0.94);   /* = --bg: ink text over the photo, as dark's black shade */
  --overlay-soft: rgba(250, 249, 245, 0.1);
  --overlay-side: rgba(250, 249, 245, 0.8);
  --band-bg: var(--surface);
  --band-text: var(--text);
  --band-muted: var(--text-muted);
  --band-hairline: var(--hairline);
  --dot-ok: #2F6B4F;
  --dot-warn: #7A5B18;
  --dot-info: #2C5A96;
  --focus: #141413;
  --hero-sub: var(--text-muted);
  --placeholder: repeating-linear-gradient(135deg, rgba(20,20,19,.05) 0 12px, rgba(20,20,19,.02) 12px 24px);
  color-scheme: light;
}

/* ── DARK ────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #1A1A1A;
  --bg-rgb: 26, 26, 26;
  --surface: #242424;           /* bands: 1.12:1 on bg (was #222, 1.09) */
  --surface-2: #2E2E2E;         /* cards: a step up from the band they sit on */
  --text: #FFFFFF;
  --text-rgb: 255, 255, 255;
  --text-muted: #9A9A9A;        /* 6.19:1 on --bg, 5.10:1 on --surface-2 */
  --hairline: rgba(255, 255, 255, 0.18);   /* 1.76:1 on bg (was .12, 1.42) */
  --accent: #D7BE96;            /* sand: CTA, labels above headings, markers, dates, selected filter, promo bar */
  --brand-gradient: var(--accent);
  --on-accent: #000000;
  --button-bg: var(--accent);
  --button-text: var(--on-accent);
  --button-2-bg: #FFFFFF;
  --button-2-text: #000000;
  --button-2-border: #FFFFFF;
  --button-3-border: rgba(255, 255, 255, 0.4);
  --label-color: var(--accent);
  --promo-bg: var(--accent);
  --promo-text: var(--on-accent);
  --nav-bg: var(--bg);
  --overlay-strong: rgba(0, 0, 0, 0.7);
  --overlay-soft: rgba(0, 0, 0, 0.2);
  --overlay-side: rgba(0, 0, 0, 0.45);
  --band-bg: #F0F0F0;           /* footer switches to light */
  --band-text: #1B1B1B;
  --band-muted: #555555;
  --band-hairline: rgba(27, 27, 27, 0.14);
  --dot-ok: #8FB394;
  --dot-warn: #D7BE96;
  --dot-info: #9DB4C8;
  --focus: #D7BE96;
  --hero-sub: rgba(255, 255, 255, 0.72);
  --placeholder: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,.02) 12px 24px);
  color-scheme: dark;
}

@media (max-width: 768px) {
  :root {
    --section-y: 72px;
    --gutter: 20px;
    --fs-h1: 40px;
    --fs-display-2: 36px;
    --fs-h2: 30px;
    --fs-h3: 24px;
    --fs-body: 17px;
    --fs-lead: 18px;
    --fs-stat: 34px;
    --fs-quote: 28px;
  }
}