/* ==========================================================================
   VITALO7 — Design Tokens
   Source of truth: VITALO7 Brand Book (2026). Hex codes live only here.
   Primary theme: LIGHT ("Clinical Light"). Dark is the toggle.
   ========================================================================== */

:root {
  /* --- Brand constants (theme-independent) --- */
  --mint:        #00E6A6;   /* Vital Mint — signature fill */
  --mint-deep:   #00805C;   /* accessible mint for text on light (4.5:1) */
  --cyan:        #00B8D4;   /* Deep Cyan */
  --violet:      #7C3AED;   /* Ultraviolet — accent / large type only */
  --ink:         #1A1F23;   /* Ink */
  --frost:       #F2F5F7;   /* Frost */
  --graphite:    #2A2F36;
  --mist:        #A7B3BF;

  /* Traffic-light — verdicts only (fill + accessible text variant) */
  --good:        #00E6A6;  --good-ink:  #00805C;
  --warn:        #FFB020;  --warn-ink:  #9A6300;
  --bad:         #FF5252;  --bad-ink:   #D92D2D;

  /* --- Typography --- */
  --font-display: 'Jost', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* --- Spacing (8pt scale) --- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;

  /* --- Radii --- */
  --r-input: 8px; --r-card: 12px; --r-modal: 16px; --r-pill: 999px;

  /* --- Layout --- */
  --maxw: 1200px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;

  /* ======================= LIGHT THEME (default) ======================= */
  --bg:           #F2F5F7;
  --bg-elev:      #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F7F9FA;
  --text:         #1A1F23;
  --text-muted:   #52606D;
  --text-faint:   #8A97A3;
  --border:       rgba(11, 14, 19, 0.10);
  --border-strong:rgba(11, 14, 19, 0.16);
  --brand-mark:   #00805C;   /* the "7" and mint text on light */
  --link:         #00805C;
  --shadow:       0 1px 2px rgba(11,14,19,.06), 0 8px 24px rgba(11,14,19,.06);
  --header-bg:    rgba(242, 245, 247, 0.82);
  --btn-fg:       #05110D;   /* text on mint button */
  --hero-glow:    radial-gradient(60% 80% at 80% 10%, rgba(0,230,166,.14), transparent 70%);
}

/* ========================= DARK THEME ========================= */
:root[data-theme="dark"] {
  --bg:           #0B0E13;
  --bg-elev:      #141920;
  --surface:      #141920;
  --surface-2:    #1A1F23;
  --text:         #F2F5F7;
  --text-muted:   #A7B3BF;
  --text-faint:   #5A6572;
  --border:       rgba(255, 255, 255, 0.09);
  --border-strong:rgba(255, 255, 255, 0.16);
  --brand-mark:   #00E6A6;
  --link:         #00E6A6;
  --good-ink:     #00E6A6;
  --warn-ink:     #FFB020;
  --bad-ink:      #FF7A7A;
  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --header-bg:    rgba(11, 14, 19, 0.72);
  --btn-fg:       #05110D;
  --hero-glow:    radial-gradient(60% 80% at 80% 10%, rgba(0,230,166,.10), transparent 70%);
}

/* System-preference fallback when the user hasn't chosen explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0B0E13;
    --bg-elev:      #141920;
    --surface:      #141920;
    --surface-2:    #1A1F23;
    --text:         #F2F5F7;
    --text-muted:   #A7B3BF;
    --text-faint:   #5A6572;
    --border:       rgba(255, 255, 255, 0.09);
    --border-strong:rgba(255, 255, 255, 0.16);
    --brand-mark:   #00E6A6;
    --link:         #00E6A6;
    --good-ink:     #00E6A6;
    --warn-ink:     #FFB020;
    --bad-ink:      #FF7A7A;
    --shadow:       0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
    --header-bg:    rgba(11, 14, 19, 0.72);
    --hero-glow:    radial-gradient(60% 80% at 80% 10%, rgba(0,230,166,.10), transparent 70%);
  }
}