/* ============================================================================
   SPARKPULSE — design tokens (locked source of truth)
   Generated from the Sparkpulse Design System v1.0.
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ============================================================================ */

:root {
  /* ─── PRIMITIVE COLORS ─────────────────────────────────────────────────── */
  --sp-orange-500:    #FF5436;  /* Primary mark + accent (LOCKED) */
  --sp-orange-600:    #D44114;  /* Hover/pressed */
  --sp-vermilion-500: #E8584F;  /* Alert / breaking news ONLY (LOCKED) */
  --sp-coral-400:     #FF6B5C;  /* Tertiary accent — gradients only */

  /* Ink scale (warm-neutral) */
  --sp-ink-1000: #0D0D0F;
  --sp-ink-950:  #111114;
  --sp-ink-900:  #17181C;
  --sp-ink-800:  #16161A;
  --sp-ink-100:  #F4EFE3;
  --sp-ink-50:   #FAF7EE;
  --sp-ink-0:    #FFFFFF;

  /* Alpha steps over light/dark */
  --sp-alpha-ink-72: rgba(17,17,20,0.72);
  --sp-alpha-ink-62: rgba(17,17,20,0.62);
  --sp-alpha-ink-55: rgba(17,17,20,0.55);
  --sp-alpha-ink-42: rgba(17,17,20,0.42);
  --sp-alpha-ink-22: rgba(17,17,20,0.22);
  --sp-alpha-ink-10: rgba(17,17,20,0.10);
  --sp-alpha-ink-08: rgba(17,17,20,0.08);
  --sp-alpha-ink-05: rgba(17,17,20,0.05);
  --sp-alpha-ink-04: rgba(17,17,20,0.04);

  --sp-alpha-bone-62: rgba(244,239,227,0.62);
  --sp-alpha-bone-55: rgba(244,239,227,0.55);
  --sp-alpha-bone-45: rgba(244,239,227,0.45);
  --sp-alpha-bone-22: rgba(244,239,227,0.22);
  --sp-alpha-bone-16: rgba(244,239,227,0.16);
  --sp-alpha-bone-10: rgba(244,239,227,0.10);
  --sp-alpha-bone-08: rgba(244,239,227,0.08);
  --sp-alpha-bone-05: rgba(244,239,227,0.05);

  /* ─── SECTOR ACCENTS (12) ──────────────────────────────────────────────── */
  --sp-sector-ai:           #C2410C; --sp-sector-ai-bg:           #FFE6DD;
  --sp-sector-fintech:      #15803D; --sp-sector-fintech-bg:      #DCF1E2;
  --sp-sector-design:       #6D28D9; --sp-sector-design-bg:       #EBE2FB;
  --sp-sector-productivity: #0E7490; --sp-sector-productivity-bg: #D8EEF3;
  --sp-sector-devtools:     #374151; --sp-sector-devtools-bg:     #E8E8EC;
  --sp-sector-ecommerce:    #B45309; --sp-sector-ecommerce-bg:    #F6E6C9;
  --sp-sector-marketing:    #BE185D; --sp-sector-marketing-bg:    #F9DEEA;
  --sp-sector-health:       #047857; --sp-sector-health-bg:       #D5EFE3;
  --sp-sector-gaming:       #5B21B6; --sp-sector-gaming-bg:       #E5DEF7;
  --sp-sector-education:    #1D4ED8; --sp-sector-education-bg:    #DCE5F8;
  --sp-sector-climate:      #166534; --sp-sector-climate-bg:      #DDEEDC;
  --sp-sector-hardware:     #0F172A; --sp-sector-hardware-bg:     #E2E8F0;

  /* ─── SEMANTIC (LIGHT) ─────────────────────────────────────────────────── */
  --color-bg-canvas:          var(--sp-ink-50);
  --color-bg-surface:         var(--sp-ink-0);
  --color-bg-subtle:          var(--sp-alpha-ink-04);
  --color-bg-inverse:         var(--sp-ink-1000);
  --color-fg-primary:         var(--sp-ink-950);
  --color-fg-secondary:       var(--sp-alpha-ink-62);
  --color-fg-tertiary:        var(--sp-alpha-ink-55);
  --color-fg-muted:           var(--sp-alpha-ink-42);
  --color-fg-on-inverse:      var(--sp-ink-100);
  --color-border-subtle:      var(--sp-alpha-ink-08);
  --color-border-strong:      var(--sp-alpha-ink-22);
  --color-border-divider:     var(--sp-alpha-ink-10);
  --color-accent-brand:       var(--sp-orange-500);
  --color-accent-brand-hover: var(--sp-orange-600);
  --color-accent-alert:       var(--sp-vermilion-500);
  --color-accent-alert-bg:    #FCE6E2;
  --color-track-empty:        var(--sp-alpha-ink-05);

  /* ─── TYPE ─────────────────────────────────────────────────────────────── */
  --font-display: "Sora", "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", "Söhne", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Display scale (Sora 600, tight tracking) */
  --type-display-xl-size: 56px; --type-display-xl-line: 1.02; --type-display-xl-track: -0.04em;
  --type-display-lg-size: 40px; --type-display-lg-line: 1.08; --type-display-lg-track: -0.035em;
  --type-display-md-size: 32px; --type-display-md-line: 1.12; --type-display-md-track: -0.03em;
  --type-display-sm-size: 25px; --type-display-sm-line: 1.18; --type-display-sm-track: -0.025em;
  --type-display-xs-size: 17px; --type-display-xs-line: 1.20; --type-display-xs-track: -0.02em;

  --type-body-xl-size: 21px;    --type-body-xl-line: 1.45;    --type-body-xl-track: -0.005em;
  --type-body-lg-size: 16px;    --type-body-lg-line: 1.55;    --type-body-lg-track: -0.005em;
  --type-body-md-size: 15px;    --type-body-md-line: 1.55;    --type-body-md-track: 0;
  --type-body-sm-size: 14px;    --type-body-sm-line: 1.45;    --type-body-sm-track: -0.005em;
  --type-body-xs-size: 13px;    --type-body-xs-line: 1.40;    --type-body-xs-track: 0;

  --type-mono-md-size: 12px;    --type-mono-md-track: -0.005em;
  --type-mono-sm-size: 11px;    --type-mono-sm-track: -0.005em;
  --type-mono-eyebrow-size: 10.5px; --type-mono-eyebrow-track: 0.12em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ─── SPACING (4px base) ───────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  --layout-max:    1280px;
  --layout-gutter: 80px;

  /* ─── RADIUS ───────────────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   7px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-pill: 999px;

  /* ─── SHADOWS ──────────────────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-card-hover-light: 0 6px 18px rgba(17,17,20,0.05);
  --shadow-card-hover-dark:  0 6px 18px rgba(0,0,0,0.35);
  --shadow-popover:          0 12px 32px rgba(0,0,0,0.12);
  --shadow-dropdown:         0 24px 48px rgba(0,0,0,0.14);
  --shadow-modal:            0 32px 80px rgba(0,0,0,0.32);

  /* ─── MOTION ───────────────────────────────────────────────────────────── */
  --ease-out:         cubic-bezier(.22,1,.36,1);
  --duration-instant: 80ms;
  --duration-fast:    160ms;
  --duration-base:    200ms;
  --duration-slow:    240ms;

  /* ─── ELEVATION (sticky z) ─────────────────────────────────────────────── */
  --z-header:    40;
  --z-filterbar: 30;
  --z-popover:   50;
  --z-modal:     200;

  /* ─── LEGACY ALIASES (existing CSS still references these) ─────────────── */
  --primary:        var(--sp-orange-500);
  --primary-hover:  var(--sp-orange-600);
  --primary-light:  var(--sp-coral-400);
  --accent:         var(--sp-vermilion-500);
  --accent-light:   var(--sp-coral-400);
  --success:        #15803D;
  --bg:             var(--sp-ink-50);
  --bg-secondary:   var(--sp-alpha-ink-04);
  --bg-card:        var(--sp-ink-0);
  --text:           var(--sp-ink-950);
  --text-secondary: var(--sp-alpha-ink-62);
  --text-muted:     var(--sp-alpha-ink-42);
  --border:         var(--sp-alpha-ink-10);
  --border-light:   var(--sp-alpha-ink-08);
  --radius:         var(--radius-xl);
  /* NOTE: --radius-sm and --radius-lg are part of the LOCKED DS scale
     (7px and 10px). Do NOT redefine them here — earlier code that referenced
     the legacy 6/12 values has been retired. */
  --shadow:         0 1px 2px rgba(17,17,20,0.04);
  --shadow-md:      var(--shadow-card-hover-light);
  --shadow-lg:      var(--shadow-popover);
  --shadow-xl:      var(--shadow-dropdown);
  --font:           var(--font-body);
  --gradient-primary: linear-gradient(135deg, #FF5436 0%, #FF6B5C 60%, #E8584F 100%);
  --gradient-secondary: linear-gradient(135deg, #FF6B5C 0%, #FF5436 100%);
  --gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
}

/* ─── DARK THEME ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-canvas:      var(--sp-ink-1000);
  --color-bg-surface:     var(--sp-ink-800);
  --color-bg-subtle:      var(--sp-alpha-bone-05);
  --color-bg-inverse:     var(--sp-ink-50);
  --color-fg-primary:     var(--sp-ink-100);
  --color-fg-secondary:   var(--sp-alpha-bone-62);
  --color-fg-tertiary:    var(--sp-alpha-bone-55);
  --color-fg-muted:       var(--sp-alpha-bone-45);
  --color-fg-on-inverse:  var(--sp-ink-1000);
  --color-border-subtle:  var(--sp-alpha-bone-10);
  --color-border-strong:  var(--sp-alpha-bone-22);
  --color-border-divider: var(--sp-alpha-bone-08);
  --color-accent-alert-bg: rgba(232,88,79,0.14);
  --color-track-empty:    var(--sp-alpha-bone-08);

  --bg:             var(--sp-ink-1000);
  --bg-secondary:   var(--sp-alpha-bone-05);
  --bg-card:        var(--sp-ink-800);
  --text:           var(--sp-ink-100);
  --text-secondary: var(--sp-alpha-bone-62);
  --text-muted:     var(--sp-alpha-bone-45);
  --border:         var(--sp-alpha-bone-10);
  --border-light:   var(--sp-alpha-bone-08);
}

/* ─── FOCUS RING (a11y) ───────────────────────────────────────────────────── */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent-brand);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ─── SELECTION ───────────────────────────────────────────────────────────── */
::selection {
  background: var(--sp-orange-500);
  color: #fff;
}