/* ============================================================
   Design tokens — shared by the landing page and the dashboard.
   Built in OKLCH; neutrals are tinted toward the brand hue so
   surfaces feel authored instead of empty.
   ============================================================ */

:root {
  /* --- color: neutrals (warm, slightly amber-tinted dark) --- */
  --bg: oklch(0.16 0.012 75);          /* page canvas */
  --surface-1: oklch(0.19 0.014 75);   /* raised panel / card */
  --surface-2: oklch(0.225 0.016 75);  /* nested panel / input */
  --surface-3: oklch(0.26 0.018 75);   /* hover / pressed input */
  --border: oklch(0.29 0.02 75);       /* hairline */
  --border-strong: oklch(0.36 0.025 75);
  --text: oklch(0.94 0.012 85);
  --text-muted: oklch(0.72 0.02 80);
  --text-faint: oklch(0.6 0.018 78);

  /* --- color: roles --- */
  /* Brand accent: a signal amber — uptime lights, status,
     primary action. Distinct from the generic tech blue. */
  --accent: oklch(0.78 0.16 80);
  --accent-strong: oklch(0.85 0.17 80);
  --accent-ink: oklch(0.18 0.05 60);   /* text on accent */
  --accent-soft: oklch(0.3 0.07 80);   /* tinted fill / border */
  --focus: oklch(0.75 0.15 90);

  /* status */
  --ok: oklch(0.78 0.14 155);          /* up */
  --ok-soft: oklch(0.3 0.06 155);
  --down: oklch(0.68 0.19 25);         /* down */
  --down-soft: oklch(0.32 0.09 25);
  --warn: oklch(0.82 0.14 85);         /* warning */
  --warn-soft: oklch(0.32 0.06 85);

  /* --- type --- */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;
  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --tracking-label: 0.06em;

  /* --- spacing (1/4/9 rhythm) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-9: 36px;
  --sp-12: 48px;

  /* --- radius / shadow --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 2px oklch(0.1 0.02 75 / 0.4);
  --shadow-2: 0 8px 24px oklch(0.1 0.02 75 / 0.5);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* --- focus ring (never removed, always visible) --- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
}

/* Respect users who want less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}