/* dear diary design tokens. DESIGN_SPEC.md section 1, verbatim, with the
   AA darkening pass section 7 requires: --chalk-faint (both themes) and the
   light --accent missed WCAG AA for the 11px text they style (tab labels,
   captions, meta), so those values are darkened/brightened until every
   pairing they are used in (--slate through --slate-4) measures >= 4.5:1.
   Measured values are noted inline; keep them AA if the palette shifts.
   Imported first by both the landing page and the app.
   Dark is the default (:root); light ships via prefers-color-scheme
   AND explicit :root[data-theme="light"] so the Settings toggle can force it. */

/* ---------- 1.1 Color palette ---------- */

:root{
  /* surfaces, dark (default) */
  --slate:#0a0c0d;        /* app/page background */
  --slate-2:#0f1214;      /* raised card */
  --slate-3:#161a1d;      /* hover / nested card */
  --slate-4:#1d2226;      /* control fill, empty heatmap cell */
  --line:#2a3034;         /* hairline borders, dividers */

  /* ink */
  --chalk:#ecefe6;        /* primary text, "chalk white" */
  --chalk-dim:#9aa198;    /* secondary text */
  --chalk-faint:#838b84;  /* tertiary text, captions, meta (AA: 5.59 on --slate, 4.58 on --slate-4) */

  /* accent, warm chalk gold */
  --accent:#e6cd86;
  --accent-dim:#b89f60;
  --accent-glow:rgba(230,205,134,.16);

  /* semantic (added for the app; derived, keep chalk register) */
  --danger:#e69686;       /* destructive text/border (wipe, delete) */
  --danger-glow:rgba(230,150,134,.16);
  --ok:var(--accent);     /* success reuses accent; no green */
  --scrim:rgba(0,0,0,.55);/* dialog backdrop */

  /* heatmap ramp, dark defaults (opacity ramp of chalk) */
  --cell-0:var(--slate-4);
  --cell-1:rgba(236,239,230,.14);
  --cell-2:rgba(236,239,230,.30);
  --cell-3:rgba(236,239,230,.55);
  --cell-4:rgba(236,239,230,.85);
  /* streak cell in both themes: solid --accent + 0 0 6px var(--accent-glow) */
}

/* light: "pale board" (chalk on a washed slate board) */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --slate:#c9cec3;
    --slate-2:#c1c7bb;
    --slate-3:#b7beb1;
    --slate-4:#adb5a7;
    --line:#98a091;
    --chalk:#20261f;
    --chalk-dim:#414a3f;
    --chalk-faint:#3d463c; /* AA: 6.12 on --slate, 4.65 on --slate-4 */
    --accent:#5c4a14;      /* AA: 5.36 on --slate (11px active tab label) */
    --accent-dim:#7d6828;
    --accent-glow:rgba(92,74,20,.14);
    --danger:#8a3826;
    --danger-glow:rgba(138,56,38,.14);
    --scrim:rgba(0,0,0,.28);
    /* heatmap light ramp (ink opacity ramp) */
    --cell-1:rgba(32,38,31,.18);
    --cell-2:rgba(32,38,31,.40);
    --cell-3:rgba(32,38,31,.65);
    --cell-4:rgba(32,38,31,.90);
  }
}

/* explicit toggle overrides (in-app Settings theme switch).
   Values are spelled out in full so this "final" token file carries no
   copy-me-from-above placeholder. They mirror the two blocks above exactly. */
:root[data-theme="light"]{
  --slate:#c9cec3;
  --slate-2:#c1c7bb;
  --slate-3:#b7beb1;
  --slate-4:#adb5a7;
  --line:#98a091;
  --chalk:#20261f;
  --chalk-dim:#414a3f;
  --chalk-faint:#3d463c; /* AA: 6.12 on --slate, 4.65 on --slate-4 */
  --accent:#5c4a14;      /* AA: 5.36 on --slate (11px active tab label) */
  --accent-dim:#7d6828;
  --accent-glow:rgba(92,74,20,.14);
  --danger:#8a3826;
  --danger-glow:rgba(138,56,38,.14);
  --scrim:rgba(0,0,0,.28);
  /* --ok:var(--accent) follows --accent, no override needed */
  /* heatmap light ramp (mirrors the light-overrides block above) */
  --cell-1:rgba(32,38,31,.18);
  --cell-2:rgba(32,38,31,.40);
  --cell-3:rgba(32,38,31,.65);
  --cell-4:rgba(32,38,31,.90);
}
:root[data-theme="dark"]{
  --slate:#0a0c0d;
  --slate-2:#0f1214;
  --slate-3:#161a1d;
  --slate-4:#1d2226;
  --line:#2a3034;
  --chalk:#ecefe6;
  --chalk-dim:#9aa198;
  --chalk-faint:#838b84; /* AA: 5.59 on --slate, 4.58 on --slate-4 */
  --accent:#e6cd86;
  --accent-dim:#b89f60;
  --accent-glow:rgba(230,205,134,.16);
  --danger:#e69686;
  --danger-glow:rgba(230,150,134,.16);
  --ok:var(--accent);
  --scrim:rgba(0,0,0,.55);
  /* heatmap dark ramp (mirrors the dark defaults above) */
  --cell-1:rgba(236,239,230,.14);
  --cell-2:rgba(236,239,230,.30);
  --cell-3:rgba(236,239,230,.55);
  --cell-4:rgba(236,239,230,.85);
}

/* ---------- 1.2 Type scale and font stacks ---------- */

:root{
  /* three voices, all system/local fonts, no web-font download */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;  /* the transcript voice: entries, live text, hero */
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* headlines, body, UI chrome */
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace; /* counters, eyebrows, timers, tags, ledger */

  /* scale (fluid via clamp, mobile-first floors) */
  --fs-eyebrow:12px;   /* mono, letter-spacing .32em, uppercase */
  --fs-caption:11px;   /* mono, letter-spacing .2em, uppercase */
  --fs-meta:12.5px;    /* mono */
  --fs-body:16px;
  --fs-body-lg:17px;
  --fs-entry:16.5px;   /* serif entry text */
  --fs-lede:clamp(16px,2vw,19px);
  --fs-live:clamp(19px,2.5vw,25px);   /* serif live transcript */
  --fs-h3:24px;
  --fs-h2:clamp(28px,4.4vw,50px);
  --fs-h1:clamp(40px,6.3vw,76px);     /* landing hero only */
  --fs-odometer:clamp(76px,13vw,132px);/* mono ledger big number */

  /* weights */
  --fw-body:400; --fw-head:600; --fw-mono-strong:700;
  /* leading (spec: 1.55 body, 1.04 headings, 1.4 live/entry text) */
  --lh-body:1.55; --lh-head:1.04; --lh-entry:1.4;
  /* tracking (spec: headings -.02em; mono eyebrows .32em; captions .2em) */
  --ls-head:-.02em; --ls-eyebrow:.32em; --ls-caption:.2em;
}

/* ---------- 1.3 Spacing, radii, shadows, motion tokens ---------- */

:root{
  /* spacing scale (4px base rhythm from t1) */
  --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:18px; --sp-5:22px;
  --sp-6:28px; --sp-7:38px; --sp-8:56px; --sp-9:96px;
  --wrap-max:1180px; --wrap-pad:28px; --wrap-pad-mobile:18px;
  /* app content column is narrower than landing: */
  --app-max:640px;

  /* radii */
  --r-xs:3px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:22px; --r-pill:20px;

  /* shadows */
  --sh-card:0 40px 90px -50px rgba(0,0,0,.9);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.03);
  --sh-core:inset 0 2px 10px rgba(0,0,0,.6), 0 0 0 6px rgba(230,205,134,.05);
  --sh-core-rec:inset 0 2px 10px rgba(0,0,0,.6), 0 0 34px var(--accent-glow), 0 0 0 6px rgba(230,205,134,.12);
  --sh-dialog:0 40px 80px -40px rgba(0,0,0,.95);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);        /* default */
  --ease-land:ease;                        /* chalk letter land */
  --dur-fast:.15s; --dur:.25s; --dur-slow:.34s;

  /* texture overlays (from t1, keep as body::before grain + body::after vignette) */
  /* grain opacity .045 dark / .09 light; vignette radial from top + accent glow top-left */
}