/* ==========================================================================
   Design tokens — three layers: primitive -> semantic -> component.
   Source: design-system/pulsox-esp32/MASTER.md (consumer-wearable redesign).
   Light is the default theme. Dark is applied with data-theme="dark", or
   with data-theme="auto" when the OS prefers dark.
   Only semantic/component tokens should be used outside this file.
   ========================================================================== */

:root {
  /* ---- primitive: type ---- */
  --p-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- primitive: spacing scale ---- */
  --p-space-xs: 0.25rem;
  --p-space-sm: 0.5rem;
  --p-space-md: 1rem;
  --p-space-lg: 1.5rem;
  --p-space-xl: 2rem;

  /* ---- primitive: radii ---- */
  --p-radius-control: 16px;
  --p-radius-card-sm: 24px;
  --p-radius-card: 28px;
  --p-radius-pill: 999px;

  /* ---- primitive: status ramp (fixed, never themed, never decorative) ---- */
  --p-status-good: #0ca30c;
  --p-status-warning: #fab219;
  --p-status-critical-light: #d03b3b;
  --p-status-critical-dark: #e35b5b;

  /* ================= semantic (light — default) ================= */
  color-scheme: light;
  --color-background: #f4f2ef;
  --color-surface: #ffffff;
  --color-surface-2: #ece9e4;
  --color-track: #e6e3de;
  --color-line: rgba(22, 21, 29, 0.08);
  --color-foreground: #16151d;
  --color-muted: #5b5a6b;

  --color-primary: #2b58e0; /* SpO2 / brand */
  --color-primary-tint: rgba(43, 88, 224, 0.1);
  --color-on-primary: #ffffff;
  --color-violet: #6a44d8; /* heart rate / PPG */
  --color-violet-tint: rgba(106, 68, 216, 0.1);
  --color-destructive: #b93030;
  --color-destructive-tint: rgba(208, 59, 59, 0.12);
  --color-ring: var(--color-primary);

  --color-status-good: var(--p-status-good);
  --color-status-good-tint: rgba(12, 163, 12, 0.12);
  --color-status-good-glow: rgba(12, 163, 12, 0.3);
  --color-status-warning: var(--p-status-warning);
  --color-status-warning-tint: rgba(250, 178, 25, 0.26);
  --color-status-warning-glow: rgba(250, 178, 25, 0.35);
  --color-status-critical: var(--p-status-critical-light);
  --color-status-critical-tint: rgba(208, 59, 59, 0.12);
  --color-status-critical-glow: rgba(208, 59, 59, 0.3);
  --color-status-unknown-tint: rgba(91, 90, 107, 0.1);

  --shadow-raised: 0 12px 28px rgba(22, 21, 29, 0.18);

  --radius-card: var(--p-radius-card);
  --radius-card-sm: var(--p-radius-card-sm);
  --radius-control: var(--p-radius-control);
  --radius-pill: var(--p-radius-pill);

  --space-xs: var(--p-space-xs);
  --space-sm: var(--p-space-sm);
  --space-md: var(--p-space-md);
  --space-lg: var(--p-space-lg);
  --space-xl: var(--p-space-xl);

  --font: var(--p-font);

  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --nav-height: 82px;
}

/* ================= semantic (dark) =================
   Same roles, stepped for a near-black ground. Declared twice (explicit dark
   and auto-when-OS-dark) because CSS has no mixins. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #0c0d12;
  --color-surface: #16181f;
  --color-surface-2: #22252f;
  --color-track: #2a2d3a;
  --color-line: rgba(255, 255, 255, 0.08);
  --color-foreground: #f5f4f8;
  --color-muted: #9ea0b4;

  --color-primary: #6b97ff;
  --color-primary-tint: rgba(107, 151, 255, 0.16);
  --color-on-primary: #0a1030;
  --color-violet: #b39bff;
  --color-violet-tint: rgba(179, 155, 255, 0.16);
  --color-destructive: #e35b5b;
  --color-destructive-tint: rgba(227, 91, 91, 0.18);

  --color-status-good-tint: rgba(12, 163, 12, 0.18);
  --color-status-good-glow: rgba(12, 163, 12, 0.55);
  --color-status-warning-tint: rgba(250, 178, 25, 0.2);
  --color-status-warning-glow: rgba(250, 178, 25, 0.5);
  --color-status-critical: var(--p-status-critical-dark);
  --color-status-critical-tint: rgba(227, 91, 91, 0.2);
  --color-status-critical-glow: rgba(227, 91, 91, 0.55);
  --color-status-unknown-tint: rgba(158, 160, 180, 0.14);

  --shadow-raised: 0 12px 28px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --color-background: #0c0d12;
    --color-surface: #16181f;
    --color-surface-2: #22252f;
    --color-track: #2a2d3a;
    --color-line: rgba(255, 255, 255, 0.08);
    --color-foreground: #f5f4f8;
    --color-muted: #9ea0b4;

    --color-primary: #6b97ff;
    --color-primary-tint: rgba(107, 151, 255, 0.16);
    --color-on-primary: #0a1030;
    --color-violet: #b39bff;
    --color-violet-tint: rgba(179, 155, 255, 0.16);
    --color-destructive: #e35b5b;
    --color-destructive-tint: rgba(227, 91, 91, 0.18);

    --color-status-good-tint: rgba(12, 163, 12, 0.18);
    --color-status-good-glow: rgba(12, 163, 12, 0.55);
    --color-status-warning-tint: rgba(250, 178, 25, 0.2);
    --color-status-warning-glow: rgba(250, 178, 25, 0.5);
    --color-status-critical: var(--p-status-critical-dark);
    --color-status-critical-tint: rgba(227, 91, 91, 0.2);
    --color-status-critical-glow: rgba(227, 91, 91, 0.55);
    --color-status-unknown-tint: rgba(158, 160, 180, 0.14);

    --shadow-raised: 0 12px 28px rgba(0, 0, 0, 0.5);
  }
}