/**
 * SoundRoot — Design Token Export (GPL-2.0-or-later)
 * ===================================================
 * This file is the single source of truth for the SoundRoot visual identity.
 * Import it in any project to apply the full design system.
 *
 * Usage:
 *   @import "theme.css";
 *   background: var(--sr-bg-base);
 *   color: var(--sr-text-primary);
 */

/* ─── Base palette ─────────────────────────────────────────────────── */
:root {
  /* Brand blue — primary accent */
  --sr-blue-50:  #eef5ff;
  --sr-blue-100: #d9eaff;
  --sr-blue-200: #aed0ff;
  --sr-blue-300: #74afff;
  --sr-blue-400: #4a90e2;   /* ← primary brand blue, matches widget */
  --sr-blue-500: #2d72c8;
  --sr-blue-600: #1a57a4;
  --sr-blue-700: #0e3d7a;

  /* Brand green — secondary accent / success */
  --sr-green-50:  #e6faf3;
  --sr-green-100: #b3f0d6;
  --sr-green-400: #50c878;  /* ← brand green, wire colour */
  --sr-green-500: #34a85a;
  --sr-green-600: #1f7a3f;

  /* Dark background scale */
  --sr-dark-950: #050d0b;
  --sr-dark-900: #0a1714;   /* ← deepest bg */
  --sr-dark-850: #0e1f1a;
  --sr-dark-800: #111f1b;   /* ← card bg dark */
  --sr-dark-700: #172d27;
  --sr-dark-600: #1e3c34;
  --sr-dark-500: #274d44;

  /* Light background scale */
  --sr-light-50:  #f8faf9;
  --sr-light-100: #f0f4f2;
  --sr-light-200: #e4ece9;
  --sr-light-300: #d0ddd9;

  /* Text */
  --sr-text-primary:   #e2ede9;
  --sr-text-secondary: #9ab5ad;
  --sr-text-muted:     #5d8078;
  --sr-text-on-blue:   #ffffff;

  /* Errors / warnings */
  --sr-red-400:    #e74c3c;
  --sr-amber-400:  #f39c12;
  --sr-purple-400: #9b59b6;

  /* All connection wire brand colours (matches widget linkColors) */
  --sr-wire-1: var(--sr-blue-400);
  --sr-wire-2: var(--sr-green-400);
  --sr-wire-3: var(--sr-red-400);
  --sr-wire-4: var(--sr-amber-400);
  --sr-wire-5: var(--sr-purple-400);
  --sr-wire-6: #1abc9c;
  --sr-wire-7: #e67e22;
  --sr-wire-8: #2ecc71;
  --sr-wire-9: #3498db;
  --sr-wire-10: #e91e63;

  /* ─── Semantic tokens (dark-mode defaults) ──────────────────────── */
  --sr-bg-base:       var(--sr-dark-900);
  --sr-bg-surface:    var(--sr-dark-800);
  --sr-bg-elevated:   var(--sr-dark-700);
  --sr-bg-overlay:    rgba(14, 31, 26, 0.92);

  --sr-border-subtle: rgba(255,255,255,0.07);
  --sr-border-strong: rgba(255,255,255,0.14);

  --sr-fg-primary:    var(--sr-text-primary);
  --sr-fg-secondary:  var(--sr-text-secondary);
  --sr-fg-muted:      var(--sr-text-muted);

  --sr-accent:        var(--sr-blue-400);
  --sr-accent-glow:   rgba(74,144,226,0.35);
  --sr-accent-subtle: rgba(74,144,226,0.12);

  --sr-success:       var(--sr-green-400);
  --sr-success-glow:  rgba(80,200,120,0.30);

  /* ─── Typography ────────────────────────────────────────────────── */
  --sr-font-sans:    "Space Grotesk", system-ui, sans-serif;
  --sr-font-mono:    "IBM Plex Mono", "Cascadia Code", monospace;

  --sr-text-xs:   0.72rem;
  --sr-text-sm:   0.85rem;
  --sr-text-base: 1rem;
  --sr-text-lg:   1.125rem;
  --sr-text-xl:   1.3rem;
  --sr-text-2xl:  1.6rem;
  --sr-text-3xl:  2rem;
  --sr-text-4xl:  2.5rem;
  --sr-text-5xl:  3.2rem;
  --sr-text-6xl:  4rem;
  --sr-text-7xl:  5rem;

  --sr-leading-tight:  0.98;
  --sr-leading-snug:   1.2;
  --sr-leading-normal: 1.6;
  --sr-leading-loose:  1.8;

  --sr-tracking-wide:  0.04em;
  --sr-tracking-wider: 0.12em;
  --sr-tracking-caps:  0.18em;

  /* ─── Spacing & layout ──────────────────────────────────────────── */
  --sr-space-1:  0.25rem;
  --sr-space-2:  0.5rem;
  --sr-space-3:  0.75rem;
  --sr-space-4:  1rem;
  --sr-space-5:  1.25rem;
  --sr-space-6:  1.5rem;
  --sr-space-8:  2rem;
  --sr-space-10: 2.5rem;
  --sr-space-12: 3rem;
  --sr-space-16: 4rem;
  --sr-space-20: 5rem;
  --sr-space-24: 6rem;

  --sr-radius-sm:   6px;
  --sr-radius-md:   10px;
  --sr-radius-lg:   16px;
  --sr-radius-xl:   24px;
  --sr-radius-full: 9999px;

  --sr-container: 1140px;

  /* ─── Shadows & glows ───────────────────────────────────────────── */
  --sr-shadow-card:   0 4px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
  --sr-shadow-glow:   0 8px 40px rgba(74,144,226,0.28);
  --sr-shadow-hero:   0 32px 80px rgba(0,0,0,0.6);
  --sr-shadow-soft:   0 2px 12px rgba(0,0,0,0.25);

  /* ─── Motion ────────────────────────────────────────────────────── */
  --sr-ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --sr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sr-duration-fast:   120ms;
  --sr-duration-normal: 240ms;
  --sr-duration-slow:   420ms;

  /* ─── Hero gradient ─────────────────────────────────────────────── */
  --sr-hero-gradient:
    radial-gradient(900px 500px at 5% -5%, rgba(74,144,226,0.18) 0%, transparent 55%),
    radial-gradient(700px 500px at 100% 0%, rgba(80,200,120,0.14) 0%, transparent 55%),
    linear-gradient(160deg, var(--sr-dark-950) 0%, var(--sr-dark-900) 50%, var(--sr-dark-850) 100%);
}

/* ─── Light mode overrides ──────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --sr-bg-base:      var(--sr-light-50);
    --sr-bg-surface:   #ffffff;
    --sr-bg-elevated:  var(--sr-light-100);
    --sr-bg-overlay:   rgba(248,250,249,0.95);

    --sr-border-subtle: rgba(0,0,0,0.07);
    --sr-border-strong: rgba(0,0,0,0.13);

    --sr-fg-primary:   #0e1f1a;
    --sr-fg-secondary: #2d504a;
    --sr-fg-muted:     #618079;

    --sr-accent-glow:   rgba(74,144,226,0.18);
    --sr-accent-subtle: rgba(74,144,226,0.08);

    --sr-shadow-card: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.07);
    --sr-shadow-glow: 0 8px 40px rgba(74,144,226,0.16);
    --sr-shadow-hero: 0 32px 80px rgba(0,0,0,0.15);

    --sr-hero-gradient:
      radial-gradient(900px 500px at 5% -5%, rgba(74,144,226,0.10) 0%, transparent 55%),
      radial-gradient(700px 500px at 100% 0%, rgba(80,200,120,0.09) 0%, transparent 55%),
      linear-gradient(160deg, #f6faf8 0%, #f0f4f2 50%, #edf2ef 100%);
  }
}

/* Explicit .dark class support (for JS-controlled toggle) */
.dark {
  --sr-bg-base:       var(--sr-dark-900);
  --sr-bg-surface:    var(--sr-dark-800);
  --sr-bg-elevated:   var(--sr-dark-700);
  --sr-bg-overlay:    rgba(14, 31, 26, 0.92);
  --sr-border-subtle: rgba(255,255,255,0.07);
  --sr-border-strong: rgba(255,255,255,0.14);
  --sr-fg-primary:    var(--sr-text-primary);
  --sr-fg-secondary:  var(--sr-text-secondary);
  --sr-fg-muted:      var(--sr-text-muted);
  --sr-accent-glow:   rgba(74,144,226,0.35);
  --sr-accent-subtle: rgba(74,144,226,0.12);
  --sr-shadow-card:   0 4px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
  --sr-shadow-hero:   0 32px 80px rgba(0,0,0,0.6);
  --sr-hero-gradient:
    radial-gradient(900px 500px at 5% -5%, rgba(74,144,226,0.18) 0%, transparent 55%),
    radial-gradient(700px 500px at 100% 0%, rgba(80,200,120,0.14) 0%, transparent 55%),
    linear-gradient(160deg, var(--sr-dark-950) 0%, var(--sr-dark-900) 50%, var(--sr-dark-850) 100%);
}

.light {
  --sr-bg-base:      var(--sr-light-50);
  --sr-bg-surface:   #ffffff;
  --sr-bg-elevated:  var(--sr-light-100);
  --sr-border-subtle: rgba(0,0,0,0.07);
  --sr-border-strong: rgba(0,0,0,0.13);
  --sr-fg-primary:   #0e1f1a;
  --sr-fg-secondary: #2d504a;
  --sr-fg-muted:     #618079;
  --sr-shadow-card:  0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.07);
  --sr-hero-gradient:
    radial-gradient(900px 500px at 5% -5%, rgba(74,144,226,0.10) 0%, transparent 55%),
    radial-gradient(700px 500px at 100% 0%, rgba(80,200,120,0.09) 0%, transparent 55%),
    linear-gradient(160deg, #f6faf8 0%, #f0f4f2 50%, #edf2ef 100%);
}