/* Miscusi site tokens — verbatim excerpts from the design-system token files
   (design_handoff_miscusi_board/tokens/, synced 2026-07-21; sweep themes
   2026-07-30). The site ships clay + the 11 liquid-sweep themes, light
   variants only; the rest stay app-only. Edit the design system, not this
   file — re-excerpt on sync. */

/* ---- tokens/colors.css :root (defaults = clay dark + semantic aliases) ----
   One line omitted: `--text-body: var(--on-field);` — it collides with the
   typography size token of the same name (typography.css wins in the app's
   import order, so the alias never took effect). Upstream fix pending in the
   design project; site.css uses --on-field directly. */
:root {
  /* ---- clay dark (heritage default) ---- */
  --field: #6E625C;
  --tile-dormant: #7A6E67;
  --tile-active: #4A3B35;
  --plate: #3A2E29;
  --control: #F2EBD3;
  --ember: #F8AB5B;
  --on-field: #F7F1E3;
  --on-tile: #F2E8D8;
  --on-plate: #F2E8D8;
  --on-control: #2B211C;
  --danger: #C24545;
  --scrim: rgba(0, 0, 0, 0.40);

  /* ---- semantic aliases (never hardcode raw hexes in components) ---- */
  --surface-board: var(--field);
  --surface-sheet: var(--plate);
  --surface-action: var(--control);
  --text-on-sheet: var(--on-plate);
  --text-on-action: var(--on-control);
  --accent: var(--ember);
  /* ember glow — accent at low alpha for tile inner glows */
  --ember-glow: color-mix(in srgb, var(--ember) 45%, transparent);
  --ember-glow-soft: color-mix(in srgb, var(--ember) 22%, transparent);
}

/* ================= clay — default; heritage warm taupe ================= */
[data-theme="clay"][data-variant="dark"] {
  --field: #6E625C; --tile-dormant: #7A6E67; --tile-active: #4A3B35;
  --plate: #3A2E29; --control: #F2EBD3; --ember: #F8AB5B;
  --on-field: #F7F1E3; --on-tile: #F2E8D8; --on-plate: #F2E8D8; --on-control: #2B211C;
  --danger: #C24545; --scrim: rgba(0,0,0,0.40);
}
[data-theme="clay"][data-variant="light"] {
  --field: #E7DDD0; --tile-dormant: #DACFC0; --tile-active: #A98D77;
  --plate: #F6F1E7; --control: #3E322C; --ember: #B26B1F;
  --on-field: #3A2E29; --on-tile: #2E241E; --on-plate: #3A2E29; --on-control: #F5EFE4;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}

/* ---- the 11 liquid-sweep companions (handoff-2026-07-30) — light variants
   verbatim from tokens/colors.css, ordered as the sweep cycles them ---- */
/* ================= tide — heritage slate + coral ================= */
[data-theme="tide"][data-variant="light"] {
  --field: #DCE6E9; --tile-dormant: #CBD9DD; --tile-active: #9FB4BC;
  --plate: #F2F6F7; --control: #2E3E47; --ember: #C7413F;
  --on-field: #22303A; --on-tile: #1C272E; --on-plate: #22303A; --on-control: #EFF4F5;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= plum — dusk violet + peach ================= */
[data-theme="plum"][data-variant="light"] {
  --field: #E8E0E9; --tile-dormant: #DBD0DD; --tile-active: #A893AF;
  --plate: #F5F1F6; --control: #403645; --ember: #A34A31;
  --on-field: #332B38; --on-tile: #2B2430; --on-plate: #332B38; --on-control: #F3EEF4;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= honey — amber + comb gold ================= */
[data-theme="honey"][data-variant="light"] {
  --field: #EEE2C8; --tile-dormant: #E2D2AE; --tile-active: #BB9455; --plate: #F8F3E5; --control: #483619; --ember: #9A6206; --on-field: #3C2E14; --on-tile: #33260F; --on-plate: #3C2E14; --on-control: #F6F0E1;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= mint — cool green + warm gold ================= */
[data-theme="mint"][data-variant="light"] {
  --field: #DCEAE2; --tile-dormant: #C8DDD1; --tile-active: #8AB3A0; --plate: #F1F8F4; --control: #2C4238; --ember: #9A6210; --on-field: #24382F; --on-tile: #1D2F27; --on-plate: #24382F; --on-control: #EFF6F2;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= rose — dusty rose + evening wine ================= */
[data-theme="rose"][data-variant="light"] {
  --field: #EBDEE1; --tile-dormant: #DECCD0; --tile-active: #B08A94;
  --plate: #F7F0F2; --control: #452E35; --ember: #A93B4C;
  --on-field: #392529; --on-tile: #301F24; --on-plate: #392529; --on-control: #F5ECEF;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= glacier — icy blue + pale gold ================= */
[data-theme="glacier"][data-variant="light"] {
  --field: #DBE8EF; --tile-dormant: #C7DAE4; --tile-active: #82A7BB; --plate: #F0F6F9; --control: #29404E; --ember: #955F14; --on-field: #223543; --on-tile: #1B2B37; --on-plate: #223543; --on-control: #EEF4F8;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= sienna — terracotta + warm sand ================= */
[data-theme="sienna"][data-variant="light"] {
  --field: #ECDCCB; --tile-dormant: #E0CAB5; --tile-active: #B87E5B;
  --plate: #F8F1E7; --control: #4B2F20; --ember: #AE521B;
  --on-field: #3D2719; --on-tile: #342013; --on-plate: #3D2719; --on-control: #F6EDE3;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= lagoon — deep teal + apricot ================= */
[data-theme="lagoon"][data-variant="light"] {
  --field: #D8E8E6; --tile-dormant: #C3DAD7; --tile-active: #79A8A4; --plate: #EFF6F5; --control: #274541; --ember: #AC5426; --on-field: #1F3835; --on-tile: #182D2A; --on-plate: #1F3835; --on-control: #ECF4F3;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= peach — soft peach + coral ================= */
[data-theme="peach"][data-variant="light"] {
  --field: #F0E0D4; --tile-dormant: #E6CFBE; --tile-active: #C08A6C; --plate: #F9F2EB; --control: #4E3225; --ember: #B3541E; --on-field: #402A1E; --on-tile: #372217; --on-plate: #402A1E; --on-control: #F7EFE8;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= wisteria — deep violet + peach gold ================= */
[data-theme="wisteria"][data-variant="light"] {
  --field: #E5E0ED; --tile-dormant: #D4CCE2; --tile-active: #9587B4; --plate: #F4F2F8; --control: #3B3057; --ember: #9C5A22; --on-field: #322A48; --on-tile: #2A2240; --on-plate: #322A48; --on-control: #F2F0F7;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}
/* ================= moss — quiet greens + lichen gold ================= */
[data-theme="moss"][data-variant="light"] {
  --field: #E3E8D6; --tile-dormant: #D3DAC4; --tile-active: #9FAB88;
  --plate: #F3F5EB; --control: #3A4234; --ember: #77660F;
  --on-field: #2E3529; --on-tile: #272D22; --on-plate: #2E3529; --on-control: #F1F4E9;
  --danger: #A83232; --scrim: rgba(0,0,0,0.25);
}

/* ---- tokens/typography.css :root ---- */
:root {
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-word: "Instrument Serif", Georgia, serif;
  /* claim codes — humans compare these by eye; system mono, no binary needed */
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* type scale (mobile-first, design @ 390×844) */
  --text-word-xl: 64px;      /* word-back reveal, short words */
  --text-word-lg: 44px;      /* word-back reveal, long words (≤20 chars) */
  --text-word-sm: 22px;      /* word inside a contributor row «…» */
  --text-timer: 40px;        /* live hold count-up */
  --text-title: 22px;        /* screen/sheet titles */
  --text-name: 19px;         /* name plates */
  --text-body: 16px;
  --text-label: 13px;        /* cell labels, meta */
  --text-micro: 11px;        /* tile faces: day numbers, micro words */

  --leading-tight: 1.05;
  --leading-body: 1.45;

  --track-plate: 0.05em;     /* heritage letter-spaced plate labels */
  --track-label: 0.02em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* timers always tabular */
  --numeric-timer: tabular-nums;
}

/* ---- tokens/grid.css :root ---- */
:root {
  --tile-unit: 60px;
  --tile-gap: 6px;
  --tile-radius: 12px;

  /* spans (unit×n + gaps) */
  --span-1: var(--tile-unit);
  --span-2: calc(var(--tile-unit) * 2 + var(--tile-gap));
  --span-3: calc(var(--tile-unit) * 3 + var(--tile-gap) * 2);

  /* spacing scale — used inside sheets/rows, not the board grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* radii beyond tiles */
  --radius-sheet: 20px;   /* detail sheets, pickers */
  --radius-pill: 999px;

  /* surfaces are FLAT — no drop shadows on tiles/cells (heritage).
     Sheets floating over the board get one soft ambient shadow. */
  --shadow-none: none;
  --shadow-sheet: 0 12px 40px rgba(0, 0, 0, 0.28);

  /* hit targets ≥ 44pt */
  --hit-min: 44px;
}

/* ---- tokens/motion.css :root ---- */
:root {
  --ease-liquid: cubic-bezier(0.30, 0.00, 0.15, 1.00);  /* tile fills, meters */
  --ease-drift: cubic-bezier(0.45, 0.05, 0.55, 0.95);   /* ember wander segments */
  --ease-settle: cubic-bezier(0.20, 0.00, 0.00, 1.00);  /* sheets, overlays */

  --dur-tick: 140ms;      /* letter slot fills, small state flips */
  --dur-fill: 420ms;      /* tile fill level changes */
  --dur-sheet: 360ms;     /* sheet enter/exit */
  --dur-reveal: 700ms;    /* word-back reveal */
  --dur-drift: 9s;        /* ember: one tile-width of wander */

  --ember-size: 28px;     /* the hold ember dot */
  --ember-halo: 72px;     /* its soft glow diameter */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-tick: 0ms;
    --dur-fill: 0ms;
    --dur-sheet: 0ms;
    --dur-reveal: 0ms;
  }
}