/* Virtual Apneist — design tokens (GENERATED from design-tokens.json — do not edit by hand) */
/* Fonts: Geist (display) · DM Sans (body) · Geist Mono (mono) */

@layer va.tokens {
  :root {
    color-scheme: dark;

    /* ---- primitives (oklch, with hex fallback below) ---- */
    --void: oklch(0.1764 0.0124 226.09);  /* #0B1215  Deepest background, input bg */
    --abyss: oklch(0.2211 0.0206 224.12);  /* #101D22  Panel/card background, fog */
    --deep: oklch(0.2712 0.0307 224.57);  /* #152A32  Secondary/raised surface */
    --petrol: oklch(0.3634 0.0390 219.14);  /* #25434C  Structural border (where fill also differs) */
    --slate: oklch(0.3841 0.0400 235.58);  /* #2E4756  Lighter structural border */
    --border-strong: oklch(0.5475 0.0283 233.41);  /* #61747F  Interactive boundary / outline — meets non-text 3:1 on all surfaces */
    --fog: oklch(0.9725 0.0076 228.85);  /* #F1F7FA  Near-white surface light, sparing */
    --sol: oklch(0.7679 0.1321 70.98);  /* #E8A44A  PRIMARY accent: CTA, connected, SpO2, interactive, focus */
    --ember: oklch(0.5860 0.1522 40.78);  /* #C4562A  Critical, danger, HR data (large/icon/fill), recording */
    --ember-text: oklch(0.6620 0.1207 42.10);  /* #D07855  Ember for small text on dark — meets 4.5:1 */
    --amber: oklch(0.6639 0.1366 51.28);  /* #D4783C  Warning, caution */
    --steel: oklch(0.5524 0.0591 223.97);  /* #4A7A8C  Depth data (large/icon/fill), dive mode, secondary interactive */
    --steel-text: oklch(0.6461 0.0477 222.06);  /* #6E95A3  Steel for small text on dark — meets 4.5:1 */
    --sage: oklch(0.6143 0.0603 149.38);  /* #6B8F71  Success, breathing/done */
    --sand: oklch(0.8833 0.0444 85.23);  /* #E6D7B8  Warm neutral highlight, CO2/O2 table mode */
    --cream: oklch(0.9192 0.0252 81.12);  /* #EDE3D2  Diver silhouette, warm anchor */
    --text-primary: oklch(0.9001 0.0087 67.72);  /* #E2DDD8  Primary text (warm off-white) */
    --text-secondary: oklch(0.6783 0.0220 224.45);  /* #8A9BA2  Secondary text */
    --text-muted: oklch(0.6513 0.0231 223.18);  /* #81939A  Tertiary/muted text */
    --text-faint: oklch(0.4393 0.0220 227.78);  /* #46555C  Disabled/inactive text only (WCAG-exempt) */

    /* ---- semantic ---- */
    --color-bg: var(--void);
    --color-surface: var(--abyss);
    --color-surface-raised: var(--deep);
    --color-border: var(--petrol);
    --color-border-light: var(--slate);
    --color-border-strong: var(--border-strong);
    --color-highlight: var(--fog);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-muted);
    --color-text-faint: var(--text-faint);
    --color-interactive: var(--sol);
    --color-interactive-text: var(--void);
    --color-focus: var(--sol);
    --color-secondary: var(--steel);
    --color-success: var(--sage);
    --color-warning: var(--amber);
    --color-danger: var(--ember);

    /* ---- component ---- */
    --c-data-hr: var(--ember);
    --c-data-hr-text: var(--ember-text);
    --c-data-spo2: var(--sol);
    --c-data-depth: var(--steel);
    --c-data-depth-text: var(--steel-text);
    --c-data-breath: var(--sage);
    --c-data-baseline: var(--text-muted);
    --c-status-connected: var(--sol);
    --c-status-success: var(--sage);
    --c-status-warning: var(--amber);
    --c-status-error: var(--ember);
    --c-mode-dive: var(--steel);
    --c-mode-hold: var(--sol);
    --c-mode-breathe: var(--sage);
    --c-mode-table: var(--sand);
    --c-mode-compete: var(--ember);
    --c-mode-learn: var(--text-muted);

    /* ---- logo ---- */
    --logo-v: var(--deep);
    --logo-a: var(--steel);
    --logo-diver: var(--cream);

    /* ---- type ---- */
    --font-display: "Geist", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, monospace;

    --radius: 6px;
  }

  /* hex fallback for engines without oklch (older WebViews) */
  @supports not (color: oklch(0 0 0)) {
    :root {
    --void: #0B1215;
    --abyss: #101D22;
    --deep: #152A32;
    --petrol: #25434C;
    --slate: #2E4756;
    --border-strong: #61747F;
    --fog: #F1F7FA;
    --sol: #E8A44A;
    --ember: #C4562A;
    --ember-text: #D07855;
    --amber: #D4783C;
    --steel: #4A7A8C;
    --steel-text: #6E95A3;
    --sage: #6B8F71;
    --sand: #E6D7B8;
    --cream: #EDE3D2;
    --text-primary: #E2DDD8;
    --text-secondary: #8A9BA2;
    --text-muted: #81939A;
    --text-faint: #46555C;
    }
  }
}

/* Derived states (perceptual, computed at use site) */
@layer va.tokens {
  :root {
    --color-interactive-hover: color-mix(in oklch, var(--color-interactive) 88%, black);
    --color-interactive-quiet: color-mix(in oklch, var(--color-interactive) 12%, var(--color-bg));
  }
}