/* ============================================================
   OhmWatch Design System — semantic tokens (single source of truth)
   Methodology + rationale: docs/design-system.md
   Raw HSL triplets live in --*-h tokens (composable with alpha:
   hsl(var(--good-h) / 0.12)); views consume the resolved aliases.
   Never use raw colors in views — only these roles.
   ============================================================ */

:root {
  /* ---- HSL triplets (the actual palette) ---- */
  --plane-h:     0 0% 5%;      /* #0d0d0d */
  --surface-h:   60 2% 10%;    /* #1a1a19 — dataviz-validated dark chart surface */
  --surface-2-h: 60 2% 13%;    /* #212120 */
  --ink-h:       0 0% 100%;
  --ink-2-h:     55 9% 74%;    /* #c3c2b7 */
  --ink-3-h:     45 3% 52%;    /* #898781 */
  --grid-h:      60 2% 17%;    /* #2c2c2a */
  --axis-h:      60 3% 21%;    /* #383835 */
  --primary-h:   213 77% 56%;  /* OhmWatch blue #3987e5 — actions & data series */
  --good-h:      120 86% 34%;  /* HEALTHY  #0ca30c — status palette is fixed,    */
  --warning-h:   41 96% 54%;   /* WATCH    #fab219 — validated on the dark       */
  --serious-h:   17 79% 64%;   /* WARNING  #ec835a — surface, never themed,      */
  --critical-h:  0 61% 52%;    /* CRITICAL #d03b3b — never color-alone           */

  /* ---- resolved aliases (what views reference) ---- */
  --plane: hsl(var(--plane-h));
  --surface: hsl(var(--surface-h));
  --surface-2: hsl(var(--surface-2-h));
  --ink: hsl(var(--ink-h));
  --ink-2: hsl(var(--ink-2-h));
  --ink-3: hsl(var(--ink-3-h));
  --grid: hsl(var(--grid-h));
  --axis: hsl(var(--axis-h));
  --ring: hsl(var(--ink-h) / 0.10);
  --primary: hsl(var(--primary-h));
  --series: hsl(var(--primary-h));   /* data series == brand blue */
  --good: hsl(var(--good-h));
  --warning: hsl(var(--warning-h));
  --serious: hsl(var(--serious-h));
  --critical: hsl(var(--critical-h));

  /* ---- composites ---- */
  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -10%, hsl(var(--primary-h) / 0.07), transparent);
  --shadow-card: 0 8px 28px hsl(0 0% 0% / 0.45);
  --shadow-select: 0 0 0 1px hsl(var(--primary-h)), 0 10px 30px hsl(0 0% 0% / 0.5);
  --shadow-crit: 0 0 26px 2px hsl(var(--critical-h) / 0.4);
  --glow-brand: 0 0 18px hsl(var(--primary-h) / 0.6);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s var(--ease);
  --t-med: 0.3s var(--ease);

  /* ---- type ---- */
  --font-d: "Chakra Petch", system-ui, sans-serif;    /* display / UI */
  --font-m: "IBM Plex Mono", ui-monospace, monospace; /* readings / data */

  /* ---- shape & rhythm (8px base) ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
}

/* ---- micro-interaction utilities (purpose-gated: feedback/guidance only) ---- */
@keyframes ow-spin { to { transform: rotate(360deg); } }
@keyframes ow-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ow-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ow-spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -3px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: ow-spin 0.8s linear infinite;
}

/* Accessibility: motion is decorative, never load-bearing */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Visible focus for keyboard users — one ring everywhere */
:focus-visible {
  outline: 2px solid hsl(var(--primary-h));
  outline-offset: 2px;
  border-radius: 4px;
}