/* ==========================================================================
   PlotFact design tokens — "Plat & Ledger"
   Every colour in the UI references a token here. Nothing hardcodes a literal,
   or it breaks in dark mode. Light is the default; dark is applied either by an
   explicit [data-theme="dark"] or by the OS preference when no theme is set.
   ========================================================================== */

/* ---- Typefaces (self-hosted: no third-party request, no CSP change) ---- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations"),
       url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/plexmono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/plexmono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Surfaces ----
     primary  = header / footer / list panels
     secondary= page ground (drafting vellum, cool not cream)
     elevated = cards
     tertiary = inset wells, skeletons, map placeholder                       */
  --bg-primary: #ffffff;
  --bg-secondary: #f1f4f3;
  --bg-tertiary: #e7ecea;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --bg-sunken: #e9eeed;

  /* ---- Text ---- */
  --text-primary: #08202b;
  --text-secondary: #48595f;
  --text-muted: #5d7278;
  --text-inverse: #ffffff;

  /* ---- Borders / rules ----
     border-input clears WCAG 1.4.11 (3:1) because on a form control the border
     IS the affordance; the softer rules are decorative separators only.       */
  --border-light: #dee5e3;
  --border-medium: #bfcbc8;
  --border-strong: #93a5a2;
  --border-input: #7f908a;

  /* ---- Signal (the brand teal — accent, live, fresh, confirmed) ---- */
  --accent-primary: #097a5f;
  --accent-primary-hover: #06614b;
  --accent-quiet: #e2f2ec;
  --accent-contrast: #05604a;

  /* ---- Plat (secondary — boundary linework, quiet structure) ---- */
  --accent-secondary: #1e4b6e;
  --accent-secondary-quiet: #e6edf3;

  /* ---- Status ----
     Signal green = good/live. Amber = caution/partial. Clay = a recorded
     distress fact (delinquent, SFHA, error). Clay is never decorative.       */
  --success: #097a5f;
  --success-bg: #e2f2ec;
  --warning: #8a5910;
  --warning-bg: #f8ecd8;
  --error: #a63626;
  --error-bg: #fae7e3;
  --info: #1e4b6e;
  --info-bg: #e6edf3;

  /* ---- Motivation score ramp (one ramp; badge AND map pins share it) ---- */
  --score-high: #097a5f;
  --score-high-bg: #ddf1e9;
  --score-med: #8a5910;
  --score-med-bg: #f8ecd8;
  --score-low: #55686e;
  --score-low-bg: #e9eeed;

  /* ---- Signal chips (neutral) ---- */
  --chip-bg: #e9eeed;
  --chip-text: #3b4d53;

  /* ---- Selection / focus ---- */
  /* Static rather than color-mix(): if the function is unsupported the whole
     declaration drops and form controls lose their focus indicator entirely. */
  --focus-ring: rgba(9, 122, 95, 0.30);
  --accent-ring: rgba(9, 122, 95, 0.42);
  --select-bg: #e2f2ec;

  /* ---- Elevation. Flat by default; depth is reserved for things that
          genuinely float (drawer, menus, tooltip).                          */
  --shadow-light: 0 1px 1px rgba(8, 32, 43, 0.04), 0 1px 3px rgba(8, 32, 43, 0.06);
  --shadow-medium: 0 4px 14px rgba(8, 32, 43, 0.10);
  --shadow-strong: 0 16px 40px rgba(8, 32, 43, 0.18);

  /* ---- Type ----
     Archivo carries body and display; the width axis gives the display voice
     without a second family. PlexMono is the record vernacular: every fixed
     fact (REID, PIN, book/page, money, date, score) is a ledger entry.       */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "PlexMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: clamp(2.5rem, 1.55rem + 3.6vw, 4.05rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.55;

  --tr-tight: -0.022em;   /* display */
  --tr-snug: -0.011em;    /* headings */
  --tr-wide: 0.09em;      /* mono annotation labels */

  /* ---- Spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3rem;
  --sp-9: 4.5rem;
  --sp-10: 6rem;

  /* ---- Radius — an instrument, not a toy ---- */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --maxw: 1140px;
  --maxw-prose: 46rem;
}

/* ==========================================================================
   Dark — the same plat, drawn in ink
   ========================================================================== */
[data-theme="dark"] {
  --bg-primary: #071a22;
  --bg-secondary: #0b222c;
  --bg-tertiary: #143038;
  --bg-elevated: #0e2831;
  --bg-input: #0e2831;
  --bg-sunken: #061620;

  --text-primary: #e6eeec;
  --text-secondary: #a3b7b6;
  --text-muted: #7b9090;
  --text-inverse: #04161d;

  --border-light: #18353e;
  --border-medium: #2a4a53;
  --border-strong: #476a72;
  --border-input: #527b82;

  --accent-primary: #37d9a9;
  --accent-primary-hover: #5ce4bd;
  --accent-quiet: #0d3a33;
  --accent-contrast: #7cecca;

  --accent-secondary: #79b4dd;
  --accent-secondary-quiet: #0f2c3d;

  --success: #37d9a9;
  --success-bg: #0d3a33;
  --warning: #e5ad52;
  --warning-bg: #38290d;
  --error: #f2907a;
  --error-bg: #3d1a15;
  --info: #79b4dd;
  --info-bg: #0f2c3d;

  --score-high: #37d9a9;
  --score-high-bg: #0d3a33;
  --score-med: #e5ad52;
  --score-med-bg: #38290d;
  --score-low: #9db0b2;
  --score-low-bg: #16323a;

  --chip-bg: #16323a;
  --chip-text: #c3d4d3;

  --focus-ring: rgba(55, 217, 169, 0.32);
  --accent-ring: rgba(55, 217, 169, 0.45);
  --select-bg: #0d3a33;

  --shadow-light: 0 1px 2px rgba(0, 0, 0, 0.44);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.52);
  --shadow-strong: 0 18px 44px rgba(0, 0, 0, 0.64);
}

/* Follow the OS when the visitor hasn't explicitly picked a theme. Kept in
   sync with the block above — any change there must be mirrored here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #071a22;
    --bg-secondary: #0b222c;
    --bg-tertiary: #143038;
    --bg-elevated: #0e2831;
    --bg-input: #0e2831;
    --bg-sunken: #061620;

    --text-primary: #e6eeec;
    --text-secondary: #a3b7b6;
    --text-muted: #7b9090;
    --text-inverse: #04161d;

    --border-light: #18353e;
    --border-medium: #2a4a53;
    --border-strong: #476a72;
    --border-input: #527b82;

    --accent-primary: #37d9a9;
    --accent-primary-hover: #5ce4bd;
    --accent-quiet: #0d3a33;
    --accent-contrast: #7cecca;

    --accent-secondary: #79b4dd;
    --accent-secondary-quiet: #0f2c3d;

    --success: #37d9a9;
    --success-bg: #0d3a33;
    --warning: #e5ad52;
    --warning-bg: #38290d;
    --error: #f2907a;
    --error-bg: #3d1a15;
    --info: #79b4dd;
    --info-bg: #0f2c3d;

    --score-high: #37d9a9;
    --score-high-bg: #0d3a33;
    --score-med: #e5ad52;
    --score-med-bg: #38290d;
    --score-low: #9db0b2;
    --score-low-bg: #16323a;

    --chip-bg: #16323a;
    --chip-text: #c3d4d3;

    --focus-ring: rgba(55, 217, 169, 0.32);
  --accent-ring: rgba(55, 217, 169, 0.45);
  --select-bg: #0d3a33;

    --shadow-light: 0 1px 2px rgba(0, 0, 0, 0.44);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.52);
    --shadow-strong: 0 18px 44px rgba(0, 0, 0, 0.64);
  }
}