/* ═══════════════════════════════════════════
   ClearCoach — Design Tokens
   Single source of truth for ALL colors,
   radii, shadows, and layout constants.
   ═══════════════════════════════════════════ */

/* ── Light defaults ─────────────────────── */
:root {
  /* Accent */
  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-dim:    rgba(37,99,235,.08);
  --accent-border: rgba(37,99,235,.20);
  /* brand.css compat */
  --brand:       #2563EB;
  --brand-light: #3B82F6;
  --brand-dark:  #1D4ED8;
  --brand-dim:   rgba(37,99,235,.08);

  /* Status */
  --green:   #10B981;
  --yellow:  #F59E0B;
  --red:     #EF4444;
  --orange:  #F97316;
  --success: #10B981;
  --warning: #F59E0B;
  --danger:  #EF4444;

  /* Badge */
  --badge-critical:   #EF4444;
  --badge-important:  #F59E0B;
  --badge-minor:      #6B7280;
  --badge-negligible: #10B981;

  /* Surfaces */
  --bg-main:  #F5F5F7;  /* page body */
  --bg-panel: #FFFFFF;  /* panels, topbar, navbar */
  --bg-card:  #F3F4F6;  /* cards, sunken areas */
  --bg-input: #FFFFFF;  /* form inputs */
  --bg-4:     #E5E7EB;  /* pressed / extra-dark surface */
  /* brand.css numbered compat */
  --bg:   #FFFFFF;
  --bg-2: #F5F5F7;
  --bg-3: #F3F4F6;

  /* Text */
  --text-pri: #111827;
  --text-sec: #6B7280;
  --text-ter: #C7C7CC;
  /* brand.css numbered compat */
  --text:   #111827;
  --text-2: #374151;
  --text-3: #6B7280;

  /* Border */
  --border: #E5E7EB;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.16);
  --shadow:    0 4px 16px rgba(0,0,0,.10);  /* compat alias */

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;
  --radius:      10px;   /* style.css compat */
  --r:           10px;   /* brand.css compat */
  --r-sm:         6px;   /* brand.css compat */

  /* Layout */
  --nav-h:    60px;
  --topbar-h: 52px;
}

/* ── Dark overrides ─────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --accent:        #3b82f6;
    --accent-hover:  #2563EB;
    --accent-dim:    rgba(59,130,246,.12);
    --accent-border: rgba(59,130,246,.25);
    --brand:       #3b82f6;
    --brand-light: #60a5fa;
    --brand-dark:  #2563EB;
    --brand-dim:   rgba(59,130,246,.12);

    --bg-main:  #0d0d0f;
    --bg-panel: #1c1c1e;
    --bg-card:  #2c2c2e;
    --bg-input: #1c1c1e;
    --bg-4:     #3a3a3c;
    --bg:   #1c1c1e;
    --bg-2: #0d0d0f;
    --bg-3: #2c2c2e;

    --text-pri: #f2f2f7;
    --text-sec: #8e8e93;
    --text-ter: #48484a;
    --text:   #f2f2f7;
    --text-2: #d1d1d6;
    --text-3: #8e8e93;

    --badge-minor: #8e8e93;

    --border: #3a3a3c;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.30);
    --shadow-md: 0 4px 16px rgba(0,0,0,.40);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.55);
    --shadow:    0 4px 16px rgba(0,0,0,.40);
  }
}