/* styles.css — tokens → base → layout → components → panels → themes.
   Design language: warm paper & ink, hairlines, monochrome graphics,
   no accent hue (status triad --ok/--warn/--bad is the one exception). */

/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════ */

:root {
  --bg:        #dcd8ce;
  --fg:        #1c1c1a;
  --panel-bg:  #eae7dc;
  --hairline:  rgba(28,28,26,0.35);
  --line:        rgba(28,28,26,0.16);
  --line-strong: rgba(28,28,26,0.38);
  --ink:       #2B2822;
  --ink-soft:  #4f4c46;
  /* ink-faint and the three status-text colors are darkened from their
     original values (contrast ~4.9:1, barely clearing WCAG AA's 4.5:1) to
     ~5.7-5.8:1 — same hue, comfortable margin instead of a hair's width.
     Dark mode's equivalents already clear 6.7-10:1 and are untouched. */
  --ink-faint: #514f49;
  --emphasis:  var(--fg);
  --today:     var(--fg);
  --weekend-tint: rgba(43,40,34,0.035);
  --ok:   #7ec47f;  --warn: #c9a84c;  --bad: #c47f7f;
  --ok-text: #375638; --warn-text: #5d4e23; --bad-text: #6a4545;
  --chip-bg:  rgba(128,128,128,0.12);
  --hover-bg: rgba(0,0,0,0.04);
  --scrim:    rgba(0,0,0,0.55);

  /* Frosted popover surface — the single source of truth for every NON-MODAL
     popover: header bell/user menus, to-do status menu, tracker delete-confirm,
     custom-select listbox, attention-board tooltip. Any future popover of the
     same kind should use these two tokens too. A translucent fill plus a
     backdrop blur so the canvas reads through as frosted glass instead of a
     solid panel. Modals and solid panels deliberately keep opaque --panel-bg.
     --popover-bg is --panel-bg (#eae7dc) at reduced alpha; --popover-blur is
     theme-independent, declared once here. */
  --popover-bg:   rgba(234, 231, 220, 0.45);
  --popover-blur: blur(10px) saturate(140%);

  /* Floating-layer elevation — tooltip, dropdown menu, drag ghost. Consolidates
     a value that was hand-typed identically in four stylesheets. Warm-ink
     tinted in light mode (not flat black) to match the "warm paper & ink"
     palette; redeclared in dark since a warm tint barely registers there and
     a neutral black reads the elevation better against a dark canvas. */
  --shadow-float: 0 4px 16px rgba(28,28,26,0.18);

  /* Fixed text color for status-fill backgrounds (badges, active gate
     segments) — needs real white/near-black regardless of theme, since --bg
     is greige/graphite, not white, and wouldn't contrast reliably against
     mid-toned --ok/--warn/--bad fills. Redeclared in dark (see below). */
  --on-status-fg: #fff;

  --phase-1: var(--ink-faint);
  --phase-2: color-mix(in srgb, var(--fg) 20%, var(--ink-faint));
  --phase-3: color-mix(in srgb, var(--fg) 40%, var(--ink-faint));
  --phase-4: color-mix(in srgb, var(--fg) 60%, var(--ink-faint));
  --phase-5: color-mix(in srgb, var(--fg) 80%, var(--ink-faint));
  --phase-6: var(--fg);

  --text-xl: 22px; --text-lg: 16px; --text-base: 12px;
  --text-sm: 10px; --text-xs: 9px;
  --lh-title: 1.15; --lh-heading: 1.25; --lh-body: 1.4;

  --radius-sm: 2px; --radius-md: 5px;
  --radius-bar: 4px;    /* thin rounded bars: scrollbar thumbs, progress meters */
  --radius-pill: 999px; /* fully-rounded count badges (stadium shape) */
  --dur-fast: .15s; --dur-base: .28s;

  /* Single-source control heights: buttons already hit these via their own
     padding math, so inputs/selects are pinned to match them explicitly
     rather than approximated via padding (native <select> chrome resists
     shrinking via padding alone — see the select rule below). */
  --control-h: 28px; --control-h-sm: 20px;

  /* Responsive artboard: fills the window on normal & widescreen displays,
     capped only for genuinely ultrawide (21:9) monitors so it never
     over-expands there. */
  --ab-max-w: 1920px;      /* cap — fills up to a full 16:9 screen, then centers */
  --ab-min-w: 1180px;      /* floor — narrower scrolls horizontally instead of cramping */
  --ab-content-w: 1300px;  /* preferred inner content width the padding protects */

  /* Horizontal padding is a "crumple zone": it holds at its 60px max on wide
     screens, then absorbs width loss FIRST as the window narrows — keeping
     content parked at ~1300px — and only bottoms out at 24px. The math
     (viewport − content)/2 is exactly the gutter that centers a 1300px block,
     so within the crumple band content stays fixed and the padding does all
     the giving. Below that band content shrinks; below --ab-min-w it scrolls.
       ≥1420px viewport → 60px pad, content grows toward the 1920 cap
       1348–1420px      → pad crumples 60→24px, content held at 1300px
       <1348px          → pad floored at 24px, content shrinks
       <1180px          → artboard floored, viewport scrolls */
  --ab-pad-x: clamp(24px, calc((100vw - var(--ab-content-w)) / 2), 60px);
  --ab-pad-y: clamp(20px, 8vh, 70px);    /* vertical: scales with height, caps at 70px */
}

body.dark {
  /* Neutral gray, not the warm cream light mode uses — light mode's --bg and
     --panel-bg were already neutral here; --fg/--ink/--ink-soft/--ink-faint
     are the values that carried the warm tint, so only those change. Status
     colors (--ok/--warn/--bad) are semantic, not part of the warm/cool
     theme, and stay as-is. */
  --bg: #161616;  --fg: #e1e1e1;  --panel-bg: #1f1f1f;
  --hairline: rgba(225,225,225,0.4);
  --line: rgba(225,225,225,0.14);  --line-strong: rgba(225,225,225,0.28);
  --ink: #e1e1e1;  --ink-soft: #adadad;  --ink-faint: #9c9c9c;
  --weekend-tint: rgba(225,225,225,0.05);
  --ok: #8fd090;  --warn: #d8b95e;  --bad: #d68f8f;
  --ok-text: #8fd090; --warn-text: #d8b95e; --bad-text: #d68f8f;
  --chip-bg: rgba(225,225,225,0.10);  --hover-bg: rgba(255,255,255,0.05);
  --scrim: rgba(0,0,0,0.6);
  /* Frosted popover fill: --panel-bg (#1f1f1f) at reduced alpha. --popover-blur
     is theme-independent and stays as declared in :root. */
  --popover-bg: rgba(31, 31, 31, 0.40);
  --shadow-float: 0 4px 16px rgba(0,0,0,0.35);
  --on-status-fg: #181613;

  /* --phase-* and --today are derived from --fg/--ink-faint. They're declared
     in :root, so they compute against the LIGHT palette and would otherwise
     stay dark (near-black) here — invisible on the dark canvas. Re-derive them
     so the timeline chart and today marker keep their contrast in dark mode. */
  --phase-1: var(--ink-faint);
  --phase-2: color-mix(in srgb, var(--fg) 20%, var(--ink-faint));
  --phase-3: color-mix(in srgb, var(--fg) 40%, var(--ink-faint));
  --phase-4: color-mix(in srgb, var(--fg) 60%, var(--ink-faint));
  --phase-5: color-mix(in srgb, var(--fg) 80%, var(--ink-faint));
  --phase-6: var(--fg);
  --today: var(--fg);
}