/* ============================================================================
   Capture — "Tactile Chips" redesign theme layer  (2026-07-12, par/capture-redesign)

   Capture-LOCAL evolution of the PärKit dark+pink language. Loaded AFTER
   base.css so these :root values win, re-theming every existing component that
   references the shared variable names (--bg, --card, --pink, …) for free.

   base.css stays byte-identical to the fleet copy on purpose — the shared-asset
   drift referee (scripts/check_shared_assets.py) must stay green, and the new
   look is proven here before any fleet-wide propagation. Everything new lives
   in this file + Capture's own components.css / views.css.

   Palette is authored in oklch() (perceptual); see UI_REDESIGN_SPEC.md +
   design_handoff_capture_redesign/README.md for the source tokens.
   ========================================================================== */

:root {
  /* ---- Surfaces (cool near-black, hue 300) ---------------------------- */
  --bg:            oklch(0.16 0.012 300);   /* app field / page bg          */
  --bg-deep:       oklch(0.15 0.012 300);   /* deepest — nav shell panel    */
  --strip-bg:      oklch(0.17 0.012 300);   /* momentum strip / inset rows  */
  --card:          oklch(0.23 0.014 300);   /* surface — the card           */
  --card-hover:    oklch(0.28 0.014 300);   /* raised / chip bg             */
  --surface-raised: oklch(0.28 0.014 300);  /* alias for intent clarity     */
  --chip-bg:       oklch(0.30 0.014 300);   /* neutral action pill bg       */
  --chip-bg-soft:  oklch(0.28 0.014 300);   /* quiet state pill bg          */
  --inset:         oklch(0.20 0.013 300);   /* voice player / inset wells   */
  /* defensive: referenced in components/views but never defined in base */
  --bg-card:       var(--card);
  --bg-elev:       var(--card-hover);
  --card-bg:       var(--card);

  /* ---- Hairlines / borders ------------------------------------------- */
  --border:        oklch(0.24 0.012 300);
  --hairline:      oklch(0.22 0.012 300);
  --border-strong: oklch(0.28 0.012 300);

  /* ---- Text ----------------------------------------------------------- */
  --text:          oklch(0.95 0.005 300);   /* primary                     */
  --text-body:     oklch(0.88 0.006 300);   /* body (weight 500)           */
  --dim:           oklch(0.62 0.010 300);   /* muted                       */
  --dimmer:        oklch(0.50 0.010 300);   /* faint                       */

  /* ---- Pink (THE accent — reserve for the single most-likely action) -- */
  --pink:          oklch(0.72 0.16 350);
  --pink-hover:    oklch(0.80 0.16 350);
  --hot:           oklch(0.72 0.16 350);
  --pink-dim:      oklch(0.72 0.16 350 / 0.22);
  --pink-glow:     oklch(0.72 0.16 350 / 0.5);
  --pink-tint-bg:  oklch(0.30 0.03 350);    /* state "task" tint bg        */
  --pink-tint-text: oklch(0.85 0.09 350);   /* state "task" tint text      */
  --nav-active-bg: oklch(0.26 0.02 350);    /* active nav pill             */
  --nav-active-text: oklch(0.90 0.04 350);

  /* ---- Green (go / done / confirm) ------------------------------------ */
  --success:       oklch(0.78 0.11 145);
  --green:         oklch(0.78 0.11 145);
  --green-tint-bg: oklch(0.32 0.04 145);
  --green-tint-text: oklch(0.85 0.10 145);

  /* ---- Amber (weight / vital) ----------------------------------------- */
  --warning:       oklch(0.82 0.12 75);
  --amber:         oklch(0.82 0.12 75);
  --amber-tint-text: oklch(0.87 0.10 75);

  /* ---- Blue (booking / project / horizon-soon) ------------------------ */
  --blue:          oklch(0.70 0.13 250);
  --blue-tint-bg:  oklch(0.26 0.04 250);
  --blue-tint-text: oklch(0.82 0.09 250);

  /* ---- Red (decline / danger) ----------------------------------------- */
  --danger:        oklch(0.82 0.09 25);
  --red:           oklch(0.82 0.09 25);

  /* ---- Teal (AI / research accent) ------------------------------------ */
  --teal:          oklch(0.78 0.06 200);
  --ai-accent:     oklch(0.78 0.06 200);
  --research-bg:   oklch(0.21 0.015 200);
  --research-border: oklch(0.30 0.02 200);
  --ai-chip-bg:    oklch(0.24 0.03 200);
  --ai-chip-text:  oklch(0.78 0.06 200);

  /* ---- Slate (system alerts — noise to resolve, never a thought) ------ */
  --system-hatch-a: oklch(0.19 0.008 260);
  --system-hatch-b: oklch(0.185 0.008 260);
  --system-border:  oklch(0.34 0.02 260);
  --system-tag-bg:  oklch(0.30 0.02 260);
  --system-tag-text: oklch(0.78 0.05 260);

  /* ---- Voice / misc keepers ------------------------------------------ */
  --voice-accent:  oklch(0.72 0.16 350);    /* fold voice into pink        */

  /* ---- Importance (weight axis) --------------------------------------- */
  --importance-vital:     oklch(0.82 0.12 75);   /* solid amber (highest) */
  --importance-important: oklch(0.70 0.13 250);  /* blue                  */
  --importance-low:       oklch(0.62 0.01 300);  /* muted grey            */

  /* ---- Tag pills ------------------------------------------------------ */
  --tag-bg:        oklch(0.28 0.014 300);
  --tag-border:    oklch(0.32 0.012 300);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Radii ---------------------------------------------------------- */
  --r-card:     18px;   /* Tactile Chips card       */
  --r-compact:  12px;   /* compact / system rows    */
  --r-shell:    22px;   /* nav shell                */
  --r-pill:     999px;  /* pills / chips / buttons  */
  --r-well:     12px;   /* inset wells (player)     */

  /* ---- Spacing (card grammar) ----------------------------------------- */
  --pad-card:   16px 18px;
  --pad-compact: 11px 14px;
  --gap-col:    14px;
  --gap-chip:   7px;
  --gap-toolbar: 5px;

  /* ---- Shadow / glow -------------------------------------------------- */
  --shadow-card: 0 8px 24px -14px oklch(0 0 0 / 0.8);
  --inset-top-hairline: inset 0 1px 0 oklch(0.30 0.014 300);
  --glow-next:   0 10px 30px -16px oklch(0.72 0.16 350 / 0.5);
}

/* ---- Base type: evolve the shared body/heading fonts (Capture-local) --- */
body {
  font-family: var(--font-body);
  background: var(--bg);              /* field, not the deepest black       */
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .nav-brand {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* The shared top gradient accent bar + noise clash with the flat, composed
   shell of the new design. Neutralize the bar; keep a whisper of noise for
   the "tactile" texture. (base.css itself stays untouched — override only.) */
body::after { display: none; }
body::before { opacity: 0.02; }

/* A touch more room for the dense desktop masonry / management views. */
.shell { max-width: 1040px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}