/* ============================================================
 * theme.css — semantic tokens + theme implementations
 *
 * Components and utilities reference ONLY the tokens defined
 * here, never the primitives in base.css. Add a new theme by
 * adding a new [data-theme="..."] block.
 *
 * Resolution rules:
 *   - default :root → light
 *   - @media (prefers-color-scheme: dark) → dark, unless user
 *     explicitly chose light via data-theme="light"
 *   - [data-theme="dark"] → explicit dark (overrides system)
 *   - [data-theme="light"] → explicit light (overrides system)
 *
 * ------------------------------------------------------------
 * Depth / elevation language (HQ-538)
 *
 * Five named surface tiers form a single L* ramp. Each tier has a
 * documented intent so a designer can pick the right one without
 * eyeballing greys. The ramp is paired with a shadow ramp; cards
 * never stack stroke + tone + shadow on the same element.
 *
 *   tier               L* light     L* dark    use
 *   ────────────────   ─────────    ───────    ────────────────────────────
 *   --surface-page     96           13         the page canvas (body bg)
 *   --surface-panel    98           17         quiet container (kanban col,
 *                                              sidebar, sectional groupings)
 *   --surface-card     100 (white)  21         content cards (paired with
 *                                              shadow-sm — no border)
 *   --surface-popover  100 (white)  25         menus / dropdowns / popovers
 *                                              (paired with shadow-md)
 *   --surface-overlay  100 (white)  21         modal dialogs (paired with
 *                                              shadow-xl + backdrop dim;
 *                                              dark mode keeps card tone
 *                                              and lets the shadow lift)
 *   --surface-sunken   94           11         recessed / hover / "carved
 *                                              out of the canvas"
 *
 * Stroke vocabulary (semantic intent):
 *   --border-subtle   separator inside a card (dividers, hr)
 *   --border-default  container outline when a tone delta isn't enough
 *                     (e.g. transparent backgrounds, narrow strokes
 *                     against the same tier)
 *   --border-strong   emphasis (focused container, dragged-over zone)
 *
 * Composition rule: on any single element, pick at most TWO of
 * {tone delta, stroke, shadow}. The card tier carries a tone delta
 * + shadow-sm and DOES NOT need a border. An outlined card carries
 * a stroke alone (no shadow, no tone delta). Stacking all three is
 * over-decoration.
 * ============================================================ */

:root {
  /* --- Surface tiers (light) -------------------------------- */
  --surface-page:    oklch(96% 0 0);
  --surface-panel:   oklch(98% 0 0);
  --surface-card:    white;
  --surface-popover: white;
  --surface-overlay: white;
  --surface-sunken:  oklch(94% 0 0);

  /* --- Legacy surface aliases (pre-HQ-538) -----------------
     Existing markup uses bg-surface-1/2/3. Map them onto the
     new tiers so old call sites keep working visually; new
     work should use bg-surface-page/-card/-popover etc. */
  --surface-1: var(--surface-page);
  --surface-2: var(--surface-card);
  --surface-3: var(--surface-popover);

  /* Form-control fill (input, textarea, select, checkbox, etc.). A
     subtle step off surface-card — enough that a control on a card reads
     as a recess without depending on the border alone, but light enough
     to stay quiet behind the user's typed content. */
  --surface-control: var(--surface-sunken);
  --surface-translucent: color-mix(in oklch, white 80%, transparent);

  /* Modal backdrop dim (NOT a surface — sits between the page and the
     elevated overlay tier). Renamed from the pre-HQ-538 --surface-overlay
     which collided with the new surface-overlay tier. */
  --backdrop: rgb(0 0 0 / 0.5);

  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-inverse:   white;
  --text-link:      var(--blue-700);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);

  --accent:       var(--blue-600);
  --accent-fg:    white;
  --accent-hover: var(--blue-700);
  --accent-muted: var(--blue-100);

  --success:    var(--green-600);
  --success-fg: white;
  --success-muted: var(--green-100);
  --danger:     var(--red-600);
  --danger-fg:  white;
  --danger-muted: var(--red-100);
  --warning:    var(--amber-500);
  --warning-fg: var(--gray-900);
  --warning-muted: var(--amber-100);

  --focus-ring: var(--blue-500);

  /* Shadow ramp — alpha is per-theme so dark mode can boost it. Geometry
     comes from --shadow-color in base.css. Each tier is paired with a
     surface in the depth doc above. */
  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.10),
               0 2px 4px -2px rgb(var(--shadow-color) / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.10),
               0 4px 6px -4px rgb(var(--shadow-color) / 0.10);
  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / 0.10),
               0 8px 10px -6px rgb(var(--shadow-color) / 0.10);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* --- Surface tiers (dark) ------------------------------- */
    --surface-page:    oklch(13% 0 0);
    --surface-panel:   oklch(17% 0 0);
    --surface-card:    oklch(21% 0 0);
    --surface-popover: oklch(25% 0 0);
    --surface-overlay: oklch(21% 0 0);
    --surface-sunken:  oklch(11% 0 0);

    --surface-1: var(--surface-page);
    --surface-2: var(--surface-card);
    --surface-3: var(--surface-popover);

    --surface-control: var(--surface-sunken);
    --surface-translucent: color-mix(in oklch, var(--surface-card) 75%, transparent);
    --backdrop: rgb(0 0 0 / 0.7);

    --text-primary:   var(--gray-50);
    --text-secondary: var(--gray-300);
    --text-muted:     var(--gray-500);
    --text-inverse:   var(--gray-950);
    --text-link:      var(--blue-300);

    --border-subtle:  var(--gray-800);
    --border-default: var(--gray-700);
    --border-strong:  var(--gray-600);

    --accent:       var(--blue-500);
    --accent-fg:    var(--gray-950);
    --accent-hover: var(--blue-400);
    --accent-muted: color-mix(in oklch, var(--accent) 22%, var(--surface-card));

    --success:       var(--green-500);
    --success-fg:    var(--gray-950);
    --success-muted: var(--green-900);
    --danger:        var(--red-500);
    --danger-fg:     white;
    --danger-muted:  var(--red-900);
    --warning:       var(--amber-400);
    --warning-fg:    var(--gray-950);
    --warning-muted: oklch(28% 0.06 75);

    --focus-ring: var(--blue-400);

    /* Dark mode shadows: 4-5× more opacity. Black-on-dark needs more
       ink to read as elevation; the depth-via-tone-delta still does most
       of the heavy lifting, but the shadow finishes the lift. */
    --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.30);
    --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.40),
                 0 2px 4px -2px rgb(var(--shadow-color) / 0.40);
    --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.50),
                 0 4px 6px -4px rgb(var(--shadow-color) / 0.40);
    --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / 0.55),
                 0 8px 10px -6px rgb(var(--shadow-color) / 0.45);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface-page:    oklch(13% 0 0);
  --surface-panel:   oklch(17% 0 0);
  --surface-card:    oklch(21% 0 0);
  --surface-popover: oklch(25% 0 0);
  --surface-overlay: oklch(21% 0 0);
  --surface-sunken:  oklch(11% 0 0);

  --surface-1: var(--surface-page);
  --surface-2: var(--surface-card);
  --surface-3: var(--surface-popover);

  --surface-control: var(--surface-sunken);
  --surface-translucent: color-mix(in oklch, var(--surface-card) 75%, transparent);
  --backdrop: rgb(0 0 0 / 0.7);

  --text-primary:   var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-muted:     var(--gray-500);
  --text-inverse:   var(--gray-950);
  --text-link:      var(--blue-300);

  --border-subtle:  var(--gray-800);
  --border-default: var(--gray-700);
  --border-strong:  var(--gray-600);

  --accent:       var(--blue-500);
  --accent-fg:    var(--gray-950);
  --accent-hover: var(--blue-400);
  --accent-muted: var(--blue-900);

  --success:       var(--green-500);
  --success-fg:    var(--gray-950);
  --success-muted: var(--green-900);
  --danger:        var(--red-500);
  --danger-fg:     white;
  --danger-muted:  var(--red-900);
  --warning:       var(--amber-400);
  --warning-fg:    var(--gray-950);
  --warning-muted: oklch(28% 0.06 75);

  --focus-ring: var(--blue-400);

  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.30);
  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.40),
               0 2px 4px -2px rgb(var(--shadow-color) / 0.40);
  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.50),
               0 4px 6px -4px rgb(var(--shadow-color) / 0.40);
  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / 0.55),
               0 8px 10px -6px rgb(var(--shadow-color) / 0.45);

  color-scheme: dark;
}

/* --- Global element styling using semantic tokens --- */

html {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-page);
}

body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}

pre {
  padding: var(--space-3);
  overflow-x: auto;
}

pre code { background: transparent; padding: 0; }

::selection {
  background: var(--accent-muted);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin-block: var(--space-6);
}