/* ============================================================
   sp-tokens.css — Strength+ Design Tokens
   Canonical source for all --sp-* custom properties.
   Legacy vars are NOT consumed outside this file.
   --sp-* is the official API — all new code references only --sp-*.
   ============================================================ */

/* ----- Dark mode (default) ----- */
:root {
  /* Backgrounds & surfaces */
  --sp-bg: #0b0d0f;
  --sp-surface: #1a1f24;
  --sp-surface-strong: #12171c;
  --sp-surface-ghost: rgba(255, 255, 255, 0.02);

  /* Text */
  --sp-ink: #e7edf2;
  --sp-muted: #9fb4c3;
  --sp-muted-dim: #6b7f8e;

  /* Accents */
  --sp-accent-lime: #b1df01;
  --sp-accent-lime-strong: #d7ff38;
  --sp-accent-teal: #4cd1a5;
  --sp-accent-orange: #f97316;
  --sp-accent-lime-subtle: rgba(177, 223, 1, 0.08);
  --sp-accent-lime-border: rgba(177, 223, 1, 0.2);
  --sp-accent-ai: #b1df01;
  --sp-accent-ai-glow: rgba(177, 223, 1, 0.25);
  --sp-accent-ai-glow-strong: rgba(177, 223, 1, 0.4);
  --sp-accent-ai-subtle: rgba(177, 223, 1, 0.08);
  --sp-accent-ai-border: rgba(177, 223, 1, 0.15);
  --sp-accent-ai-shadow: 0 8px 24px rgba(177, 223, 1, 0.2);
  --sp-accent-ai-shadow-hover: 0 12px 28px rgba(177, 223, 1, 0.28);
  --sp-accent-ai-focus-ring: 0 0 0 4px rgba(177, 223, 1, 0.2);
  --sp-error: #ea4b4b;
  --sp-on-accent: #0b0d0f; /* contrast text on bright accent backgrounds */

  /* Borders */
  --sp-border: #1f262d;
  --sp-border-ghost: rgba(255, 255, 255, 0.04);
  --sp-border-card: rgba(255, 255, 255, 0.06);
  --sp-border-panel: rgba(255, 255, 255, 0.08);
  --sp-border-input: #2e3840;

  /* Surfaces — layered */
  --sp-surface-input: #111619;
  --sp-bg-frosted: rgba(11, 13, 15, 0.85);

  /* Atmosphere — aurora + texture (consumed by body.sp-atmo) */
  --sp-atmo-lime: rgba(177, 223, 1, 0.08);
  --sp-atmo-lime-pos: 5% 8%;
  --sp-atmo-teal: rgba(76, 209, 165, 0.055);
  --sp-atmo-teal-pos: 90% 5%;
  --sp-atmo-base: linear-gradient(120deg, #0b0d0f 0%, #0e1217 50%, #10151b 100%);
  --sp-atmo-texture-color: rgba(255, 255, 255, 0.015);
  --sp-atmo-texture-spacing: 10px;
  --sp-atmo-texture-opacity: 0.18;

  /* Blur scale */
  --sp-blur-sm: 4px;
  --sp-blur-md: 12px;
  --sp-blur-lg: 20px;

  /* Shadows */
  --sp-shadow-panel: 0 20px 40px rgba(0, 0, 0, 0.32);
  --sp-shadow-metric: 0 18px 38px rgba(0, 0, 0, 0.28);
  --sp-shadow-btn: 0 12px 28px rgba(177, 223, 1, 0.18);

  /* Border radius */
  --sp-radius-panel: 24px;
  --sp-radius-card: 20px;
  --sp-radius-item: 18px;
  --sp-radius-pill: 999px;

  /* Badge tokens */
  --sp-badge-novo-bg: rgba(3, 155, 229, 0.25);
  --sp-badge-novo-text: #4fc3f7;
  --sp-badge-progress-bg: rgba(249, 115, 22, 0.22);
  --sp-badge-progress-text: var(--sp-accent-orange);
  --sp-badge-auto-bg: rgba(76, 209, 165, 0.2);
  --sp-badge-auto-text: var(--sp-accent-teal);

  /* Typography */
  --sp-font-heading: 'Space Grotesk', sans-serif;
  --sp-font-body: 'Manrope', sans-serif;
  --sp-tracking-heading: -0.02em;

  /* Focus ring */
  --sp-focus-ring: 2px solid rgba(177, 223, 1, 0.75);
  --sp-focus-ring-offset: 2px;
  --sp-focus-ring-shadow: 0 0 0 4px rgba(177, 223, 1, 0.2);

  /* Macro nutrient colors */
  --sp-macro-p: #EA4B4B;
  --sp-macro-c: #b1df01;
  --sp-macro-g: #FFC700;

  /* Threshold colors (scale questions) */
  --sp-threshold-good: #b1df01;
  --sp-threshold-attention: #ffc700;
  --sp-threshold-critical: #ea4b4b;

  /* Menu — Rail & Flyout */
  --sp-rail-hover: rgba(255,255,255,0.04);
  --sp-rail-active-bg: rgba(177,223,1,0.12);
  --sp-rail-active-indicator: var(--sp-accent-lime);
  --sp-rail-flyout-open: rgba(255,255,255,0.06);
  --sp-backdrop: rgba(0,0,0,0.6);
  --sp-flyout-shadow: 0 8px 32px rgba(0,0,0,0.3);

  /* AI Studio animations */
  --sp-ai-skeleton-duration: 1.5s;
  --sp-ai-card-enter-duration: 200ms;
  --sp-ai-exercise-enter-duration: 150ms;
  --sp-ai-success-flash-duration: 200ms;
  --sp-ai-score-transition-duration: 300ms;
  --sp-ai-macro-bar-duration: 400ms;
}

/* ----- Light mode ----- */
[data-theme="light"] {
  /* Backgrounds & surfaces */
  --sp-bg: #f8fafc;
  --sp-surface: #ffffff;
  --sp-surface-strong: #f1f5f9;
  --sp-surface-ghost: rgba(15, 23, 42, 0.02);

  /* Text */
  --sp-ink: #0f172a;
  --sp-muted: #5e6e84;
  --sp-muted-dim: #8494a7;

  /* Accents (WCAG AA on #fff) */
  --sp-accent-lime: #5a7200;
  --sp-accent-lime-strong: #435700;
  --sp-accent-teal: #0f7b5f;
  --sp-accent-orange: #c2410c;
  --sp-accent-lime-subtle: rgba(90, 114, 0, 0.06);
  --sp-accent-lime-border: rgba(90, 114, 0, 0.15);
  --sp-accent-ai: #5a7200;
  --sp-accent-ai-glow: rgba(90, 114, 0, 0.2);
  --sp-accent-ai-glow-strong: rgba(90, 114, 0, 0.35);
  --sp-accent-ai-subtle: rgba(90, 114, 0, 0.06);
  --sp-accent-ai-border: rgba(90, 114, 0, 0.12);
  --sp-accent-ai-shadow: 0 8px 24px rgba(90, 114, 0, 0.15);
  --sp-accent-ai-shadow-hover: 0 12px 28px rgba(90, 114, 0, 0.2);
  --sp-accent-ai-focus-ring: 0 0 0 4px rgba(90, 114, 0, 0.15);
  --sp-error: #b91c1c;
  --sp-on-accent: #fff;

  /* Borders */
  --sp-border: #e2e8f0;
  --sp-border-ghost: rgba(15, 23, 42, 0.04);
  --sp-border-card: rgba(15, 23, 42, 0.08);
  --sp-border-panel: rgba(15, 23, 42, 0.12);
  --sp-border-input: #cbd5e1;

  /* Surfaces — layered */
  --sp-surface-input: #f1f5f9;
  --sp-bg-frosted: rgba(248, 250, 252, 0.85);

  /* Atmosphere — light variant (preserved from existing block) */
  --sp-atmo-lime: rgba(140, 175, 0, 0.16);
  --sp-atmo-lime-pos: 12% 14%;
  --sp-atmo-teal: rgba(29, 181, 141, 0.1);
  --sp-atmo-teal-pos: 88% 8%;
  --sp-atmo-base: linear-gradient(120deg, #eef3f8 0%, #e7eef7 44%, #e1e9f3 100%);
  --sp-atmo-texture-color: rgba(15, 23, 42, 0.04);
  --sp-atmo-texture-opacity: 0.12;

  /* Shadows */
  --sp-shadow-panel: 0 20px 40px rgba(15, 23, 42, 0.08);
  --sp-shadow-metric: 0 4px 12px rgba(15, 23, 42, 0.06);
  --sp-shadow-btn: 0 12px 28px rgba(90, 114, 0, 0.12);

  /* Badge tokens */
  --sp-badge-novo-bg: rgba(3, 132, 204, 0.1);
  --sp-badge-novo-text: #0369a1;
  --sp-badge-progress-bg: rgba(194, 65, 12, 0.1);
  --sp-badge-progress-text: var(--sp-accent-orange);
  --sp-badge-auto-bg: rgba(15, 123, 95, 0.1);
  --sp-badge-auto-text: var(--sp-accent-teal);

  /* Focus ring */
  --sp-focus-ring: 2px solid rgba(90, 114, 0, 0.6);
  --sp-focus-ring-shadow: 0 0 0 4px rgba(90, 114, 0, 0.15);

  /* Threshold colors (score bars — WCAG AA on #fff) */
  --sp-threshold-good: #4d7c0f;
  --sp-threshold-attention: #b45309;
  --sp-threshold-critical: #b91c1c;

  /* Menu — Rail & Flyout */
  --sp-rail-hover: rgba(15,23,42,0.04);
  --sp-rail-active-bg: rgba(90,114,0,0.1);
  --sp-rail-active-indicator: var(--sp-accent-lime);
  --sp-rail-flyout-open: rgba(15,23,42,0.06);
  --sp-backdrop: rgba(15,23,42,0.4);
  --sp-flyout-shadow: 0 8px 32px rgba(15,23,42,0.12);
}