/*
 * Design system tokens — see GitHub issue #164 for the source decisions and
 * concrete values, #175 for the component catalog these back.
 *
 * One neutral ramp for the whole app (chrome and content share it — no
 * separate "dark chrome" palette); dark mode is that same ramp inverted.
 * Default (no data-theme attribute) follows prefers-color-scheme -- that's
 * "system" in the sidebar toggle. An explicit data-theme="light"/"dark" on
 * <html>, set by static/js/theme.js, overrides the system preference either
 * way. The dark values are intentionally duplicated between the media query
 * and the attribute selector below rather than shared, since CSS can't
 * combine the two into one selector list.
 */

:root {
  /* Color — neutrals (light) */
  --bg: #FAF8F4;
  --surface-sunken: #F4F0E6;
  --surface: #FFFFFF;
  --border: #E6E1D6;
  --border-strong: #C4BAA1;
  --text-muted: #8A7F6C;
  --text: #211D16;

  /* Color — accent */
  --accent: #00BFA6;
  --accent-hover: #00A891;
  --accent-tint: #E3FBF6;
  --accent-contrast: #102621;

  /* Color — semantic hues (light) */
  --danger: #A8342A;
  --danger-tint: #F7E9E6;
  --urgent: #B5541F;
  --urgent-tint: #F7ECE0;
  --warning: #9C6B12;
  --warning-tint: #FBF3DE;
  --success: #3F7A52;
  --success-tint: #E9F3EC;

  /* Color — reserved hues (light), not wired to any feature yet */
  --blue: #2F5C86;
  --blue-tint: #E8EEF4;
  --purple: #6B4176;
  --purple-tint: #F1E9F1;

  /* Typography */
  --font-content: Georgia, "Iowan Old Style", "Palatino Linotype", "Palatino", serif;
  --font-chrome: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-headline: 1.5rem;       /* content, 400 italic — headline/greeting */
  --fs-task-title: 1rem;       /* content, 700 — task title with description shown */
  --fs-task-title-plain: 1rem; /* content, 400 — task title, plain list, no description */
  --fs-task-description: 1rem; /* content, 400 */
  --fs-nav-label: 0.78rem;     /* chrome, 600, uppercase, tracked — nav/section label */
  --fs-meta: 0.7rem;           /* chrome, 400, uppercase, tracked — meta/byline */
  --fs-button-label: 0.76rem;  /* chrome, 400, uppercase, tracked */

  /* Spacing — 4px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* Motion — quick hover, reveal, and settling feedback. */
  --transition-fast: 150ms;

  /* Radius — compact surfaces, controls/rows, transient overlays, and
     intentionally fully rounded pills/circles. */
  --radius-panel: 4px;
  --radius-control: 8px;
  --radius-overlay: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation — flat by default (hairline borders do the separating);
     reserved for transient overlays like dropdown menus and the
     floating copy of a row mid-drag. */
  --shadow-overlay: 0 4px 20px rgba(17, 17, 24, 0.14);
  --shadow-drag: 0 6px 16px rgba(17, 17, 24, 0.18);
  --shadow-scroll: 0 2px 8px rgba(17, 17, 24, 0.08);
  --backdrop: rgba(17, 17, 24, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Color — neutrals (dark), same ramp inverted */
    --bg: #26221D;
    --surface-sunken: #211D19;
    --surface: #2E2A23;
    --border: #3A352C;
    --border-strong: #5C5342;
    --text-muted: #9A8E7C;
    --text: #F2EBDD;

    /* Color — accent (dark-bg tint) */
    --accent-tint: #0D3B33;

    /* Color — semantic hues (dark-bg tint + lightened base for legibility) */
    --danger: #E2705F;
    --danger-tint: #3D231F;
    --urgent: #E08A4C;
    --urgent-tint: #3D2A18;
    --warning: #D9A63B;
    --warning-tint: #3A2E10;
    --success: #6FBF88;
    --success-tint: #1E3327;

    /* Color — reserved hues (dark-bg tint + lightened base) */
    --blue: #6FA0C7;
    --blue-tint: #1C2E42;
    --purple: #B98BC0;
    --purple-tint: #38213E;
  }
}

:root[data-theme="dark"] {
  /* Color — neutrals (dark), same ramp inverted */
  --bg: #26221D;
  --surface-sunken: #211D19;
  --surface: #2E2A23;
  --border: #3A352C;
  --border-strong: #5C5342;
  --text-muted: #9A8E7C;
  --text: #F2EBDD;

  /* Color — accent (dark-bg tint) */
  --accent-tint: #0D3B33;

  /* Color — semantic hues (dark-bg tint + lightened base for legibility) */
  --danger: #E2705F;
  --danger-tint: #3D231F;
  --urgent: #E08A4C;
  --urgent-tint: #3D2A18;
  --warning: #D9A63B;
  --warning-tint: #3A2E10;
  --success: #6FBF88;
  --success-tint: #1E3327;

  /* Color — reserved hues (dark-bg tint + lightened base) */
  --blue: #6FA0C7;
  --blue-tint: #1C2E42;
  --purple: #B98BC0;
  --purple-tint: #38213E;
}