/* ============================================================
   STACKPICK — DESIGN SYSTEM v6.0
   Mobile-First · Dark Tech · Performance Gaming
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── Raw Color Palette ── */
:root {
  --palette-navy-950: #070C14;
  --palette-navy-900: #0D1520;
  --palette-navy-800: #111D2B;
  --palette-navy-700: #162235;
  --palette-navy-600: #1C2C44;
  --palette-navy-500: #243552;
  --palette-navy-400: #3A4F6E;
  --palette-navy-300: #5A718E;
  --palette-navy-200: #8098B4;
  --palette-navy-150: #A8BCCF;
  --palette-navy-100: #C8D7E4;
  --palette-navy-50:  #E4EDF5;

  --palette-red-900:  #3D0000;
  --palette-red-800:  #6B0000;
  --palette-red-700:  #880000;
  --palette-red-600:  #B81A1A;
  --palette-red-500:  #C82020;
  --palette-red-400:  #D93333;
  --palette-red-300:  #E46666;
  --palette-red-200:  #F0A0A0;
  --palette-red-100:  #F8DADA;
  --palette-red-50:   #FDF0F0;

  --palette-carbon-950: #0A0A0B;
  --palette-carbon-900: #111112;
  --palette-carbon-800: #1A1A1C;
  --palette-carbon-700: #252528;
  --palette-carbon-600: #333337;
  --palette-carbon-500: #45454A;
  --palette-carbon-400: #606068;
  --palette-carbon-300: #838390;
  --palette-carbon-200: #ABABB5;
  --palette-carbon-150: #C5C5CC;
  --palette-carbon-100: #DCDCE2;
  --palette-carbon-50:  #F0F0F4;

  --palette-silver-900: #1E1E22;
  --palette-silver-800: #2E2E34;
  --palette-silver-700: #3E3E46;
  --palette-silver-600: #545460;
  --palette-silver-500: #72727E;
  --palette-silver-400: #9292A0;
  --palette-silver-300: #B8B8C4;
  --palette-silver-200: #D0D0DA;
  --palette-silver-100: #E6E6EE;
  --palette-silver-50:  #F4F4F8;

  --palette-white: #FFFFFF;
  --palette-black: #000000;

  /* ── Seam palette tokens ── */
  --palette-seam-crimson: #C82020;
  --palette-seam-cobalt:  #1C2C44;
  --palette-seam-jade:    #3A4F6E;
  --palette-seam-slate:   #333337;
  --palette-seam-amber:   #545460;
}

/* ── Dark Theme (Default) ── */
:root,
[data-theme="dark"] {
  --color-bg:             var(--palette-navy-900);
  --color-bg-elevated:    var(--palette-navy-800);
  --color-bg-subtle:      var(--palette-navy-700);
  --color-bg-inset:       var(--palette-navy-950);
  --color-bg-chrome:      var(--palette-navy-950);
  --color-bg-card:        var(--palette-navy-800);
  --color-bg-card-hover:  var(--palette-navy-700);

  --color-text-primary:   #EEF2F7;
  --color-text-secondary: var(--palette-navy-150);
  --color-text-muted:     var(--palette-navy-300);
  --color-text-disabled:  var(--palette-navy-400);
  --color-text-inverse:   var(--palette-navy-900);
  --color-text-on-brand:  #FFFFFF;

  --color-accent:         var(--palette-red-500);
  --color-accent-hover:   var(--palette-red-400);
  --color-accent-active:  var(--palette-red-600);
  --color-accent-subtle:  rgba(200, 32, 32, 0.12);
  --color-accent-muted:   rgba(200, 32, 32, 0.28);

  --color-border:         var(--palette-navy-600);
  --color-border-strong:  var(--palette-navy-500);
  --color-border-accent:  var(--palette-red-600);
  --color-border-focus:   var(--palette-red-400);
  --color-border-chrome:  rgba(255,255,255,0.08);

  --color-brand:          var(--palette-silver-300);
  --color-brand-strong:   var(--palette-silver-100);

  --color-nav-bg:          var(--palette-navy-950);
  --color-nav-border:      rgba(255,255,255,0.07);
  --color-nav-text:        var(--palette-navy-200);
  --color-nav-text-active: #EEF2F7;
  --color-sidebar-bg:      var(--palette-navy-900);
  --color-sidebar-border:  var(--palette-navy-700);

  --color-overlay-bg:      var(--palette-navy-800);
  --color-scrim:           rgba(7, 12, 20, 0.90);

  --shadow-base: 0 1px 2px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.4);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px var(--color-border);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px var(--color-border-strong);
  --shadow-overlay: 0 -8px 40px rgba(0,0,0,0.7);
}

/* ── Light Theme ── */
[data-theme="light"] {
  --color-bg:             #F4F4F8;
  --color-bg-elevated:    #FFFFFF;
  --color-bg-subtle:      var(--palette-silver-100);
  --color-bg-inset:       var(--palette-silver-200);
  --color-bg-chrome:      var(--palette-navy-950);
  --color-bg-card:        #FFFFFF;
  --color-bg-card-hover:  var(--palette-silver-50);

  --color-text-primary:   var(--palette-navy-900);
  --color-text-secondary: var(--palette-carbon-500);
  --color-text-muted:     var(--palette-carbon-400);
  --color-text-disabled:  var(--palette-carbon-300);
  --color-text-inverse:   #FFFFFF;
  --color-text-on-brand:  #FFFFFF;

  --color-accent:         var(--palette-red-600);
  --color-accent-hover:   var(--palette-red-500);
  --color-accent-active:  var(--palette-red-700);
  --color-accent-subtle:  var(--palette-red-50);
  --color-accent-muted:   rgba(184,26,26,0.18);

  --color-border:         var(--palette-silver-200);
  --color-border-strong:  var(--palette-silver-300);
  --color-border-accent:  var(--palette-red-400);
  --color-border-focus:   var(--palette-red-500);
  --color-border-chrome:  rgba(0,0,0,0.08);

  --color-brand:          var(--palette-navy-600);
  --color-brand-strong:   var(--palette-navy-800);

  --color-nav-bg:          var(--palette-navy-950);
  --color-nav-border:      rgba(0,0,0,0.08);
  --color-nav-text:        var(--palette-navy-200);
  --color-nav-text-active: #FFFFFF;
  --color-sidebar-bg:      #FFFFFF;
  --color-sidebar-border:  var(--palette-silver-200);

  --color-overlay-bg:      #FFFFFF;
  --color-scrim:           rgba(7, 12, 20, 0.55);

  --shadow-base: 0 1px 2px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px var(--color-border);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.14), 0 0 0 1px var(--color-border-strong);
  --shadow-overlay: 0 -8px 40px rgba(0,0,0,0.12);

  color-scheme: light;
}

/* ── Earth Theme ── */
[data-theme="earth"] {
  --color-bg:             #1A1510;
  --color-bg-elevated:    #231E17;
  --color-bg-subtle:      #2C261E;
  --color-bg-inset:       #120F0A;
  --color-bg-chrome:      #0D0A06;
  --color-bg-card:        #231E17;
  --color-bg-card-hover:  #2C261E;

  --color-text-primary:   #F5EDD8;
  --color-text-secondary: #C8B896;
  --color-text-muted:     #8A7860;
  --color-text-disabled:  #5C4E3C;
  --color-text-inverse:   #1A1510;
  --color-text-on-brand:  #FFFFFF;

  --color-accent:         #D4752A;
  --color-accent-hover:   #E8884A;
  --color-accent-active:  #BF6020;
  --color-accent-subtle:  rgba(212,117,42,0.12);
  --color-accent-muted:   rgba(212,117,42,0.25);

  --color-border:         rgba(255,255,255,0.08);
  --color-border-strong:  rgba(255,255,255,0.14);
  --color-border-accent:  rgba(212,117,42,0.4);
  --color-border-focus:   #D4752A;
  --color-border-chrome:  rgba(255,255,255,0.06);

  --color-brand:          #C8B896;
  --color-brand-strong:   #F5EDD8;

  --color-nav-bg:          #0D0A06;
  --color-nav-border:      rgba(255,255,255,0.06);
  --color-nav-text:        #8A7860;
  --color-nav-text-active: #F5EDD8;
  --color-sidebar-bg:      #1A1510;
  --color-sidebar-border:  rgba(255,255,255,0.08);

  --color-overlay-bg:      #231E17;
  --color-scrim:           rgba(10,8,5,0.88);

  --shadow-base: 0 1px 2px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.4);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px var(--color-border);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px var(--color-border-strong);
  --shadow-overlay: 0 -8px 40px rgba(0,0,0,0.7);
}

/* Theme transition */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease !important;
}

/* ── Tag color tokens ── */
:root {
  --tag-fps-bg:            rgba(239,68,68,0.15);
  --tag-fps-text:          #FC8181;
  --tag-fps-border:        rgba(239,68,68,0.3);

  --tag-pro-bg:            rgba(168,85,247,0.15);
  --tag-pro-text:          #C084FC;
  --tag-pro-border:        rgba(168,85,247,0.3);

  --tag-budget-bg:         rgba(34,197,94,0.15);
  --tag-budget-text:       #4ADE80;
  --tag-budget-border:     rgba(34,197,94,0.3);

  --tag-wireless-bg:       rgba(59,130,246,0.15);
  --tag-wireless-text:     #60A5FA;
  --tag-wireless-border:   rgba(59,130,246,0.3);

  --tag-lightweight-bg:    rgba(14,165,233,0.15);
  --tag-lightweight-text:  #38BDF8;
  --tag-lightweight-border:rgba(14,165,233,0.3);

  --tag-comfort-bg:        rgba(99,102,241,0.15);
  --tag-comfort-text:      #818CF8;
  --tag-comfort-border:    rgba(99,102,241,0.3);

  --tag-audiophile-bg:     rgba(20,184,166,0.15);
  --tag-audiophile-text:   #2DD4BF;
  --tag-audiophile-border: rgba(20,184,166,0.3);

  --tag-hallfx-bg:         rgba(245,158,11,0.15);
  --tag-hallfx-text:       #FCD34D;
  --tag-hallfx-border:     rgba(245,158,11,0.3);

  --tag-creator-bg:        rgba(249,115,22,0.15);
  --tag-creator-text:      #FB923C;
  --tag-creator-border:    rgba(249,115,22,0.3);

  --tag-default-bg:        rgba(107,114,128,0.15);
  --tag-default-text:      #9CA3AF;
  --tag-default-border:    rgba(107,114,128,0.3);
}

/* ═══════════════════════════════════════════════
   SPACING SCALE
   ═══════════════════════════════════════════════ */
:root {
  --space-0:    0px;
  --space-0-5:  2px;
  --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;
  --space-24:   96px;
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY SCALE
   ═══════════════════════════════════════════════ */
:root {
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   0.70rem;
  --text-sm:   0.80rem;
  --text-base: 0.9375rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.1875rem;
  --text-2xl:  1.375rem;
  --text-3xl:  1.75rem;
  --text-4xl:  2.25rem;
  --text-5xl:  2.75rem;
  --text-6xl:  3.5rem;
  --text-7xl:  4.5rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.03em;
  --tracking-wider:    0.06em;
  --tracking-widest:   0.12em;
  --tracking-caps:    -0.01em;
}

/* ═══════════════════════════════════════════════
   RADIUS & BORDER
   ═══════════════════════════════════════════════ */
:root {
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
}

/* ═══════════════════════════════════════════════
   LAYOUT DIMENSIONS
   ═══════════════════════════════════════════════ */
:root {
  --topbar-height:     52px;
  --bottom-nav-height: 62px;
  --nav-height:        60px;
  --sidebar-width:     220px;
  --max-content:       720px;
  --page-pad-mobile:   16px;
  --page-pad-desktop:  24px;
}

/* ═══════════════════════════════════════════════
   ANIMATION TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --duration-instant: 50ms;
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    350ms;
  --duration-xslow:   500ms;

  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --focus-ring: 0 0 0 3px var(--color-border-focus);
}

/* ═══════════════════════════════════════════════
   COMPONENT TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --btn-height:          40px;
  --btn-height-sm:       32px;
  --btn-height-lg:       48px;
  --padding-btn:         0 var(--space-5);
  --padding-btn-sm:      0 var(--space-3);
  --btn-radius:          var(--radius-sm);
  --btn-font-family:     var(--font-display);
  --btn-font-size:       var(--text-sm);
  --btn-font-weight:     var(--weight-bold);
  --btn-letter-spacing:  var(--tracking-widest);
  --btn-transition:      var(--duration-fast) var(--ease-out);

  --btn-primary-bg:        var(--color-accent);
  --btn-primary-bg-hover:  var(--color-accent-hover);
  --btn-primary-bg-active: var(--color-accent-active);
  --btn-primary-text:      #FFFFFF;

  --btn-secondary-bg:        transparent;
  --btn-secondary-bg-hover:  var(--color-bg-subtle);
  --btn-secondary-text:      var(--color-text-secondary);
  --btn-secondary-border:    var(--color-border);

  --input-height:        44px;
  --input-radius:        var(--radius-full);
  --input-font-family:   var(--font-body);
  --input-font-size:     var(--text-sm);
  --input-padding:       0 var(--space-4);
  --input-bg:            var(--color-bg-subtle);
  --input-border:        var(--color-border);
  --input-text:          var(--color-text-primary);
  --input-placeholder:   var(--color-text-muted);

  --nav-font-family:   var(--font-body);

  --card-radius:       var(--radius-lg);

  --tag-radius:        var(--radius-full);
  --tag-font-size:     9.5px;
  --tag-height:        19px;
  --tag-padding:       0 6px;
  --tag-font-family:   var(--font-mono);
  --tag-font-weight:   var(--weight-semibold);
  --tag-letter-spacing: 0.04em;

  --star-color: #FBBF24;

  --overlay-radius-top: var(--radius-2xl);
  --overlay-max-height: 91dvh;

  --spec-font-family:    var(--font-mono);
  --spec-font-size:      var(--text-xs);

  --section-overline-font:    var(--font-mono);
  --section-overline-size:    var(--text-xs);
  --section-overline-weight:  var(--weight-semibold);
  --section-overline-spacing: var(--tracking-widest);
  --section-overline-color:   var(--color-accent);

  --logo-font-family: var(--font-display);
  --breadcrumb-font-family: var(--font-mono);
  --price-font-family: var(--font-mono);
  --chip-font-family: var(--font-mono);
}