/* ============================================================
   SNDBTS Design Tokens — CSS Custom Properties
   Companion (Figma / tooling): sndbts-tokens.json — same primitives &
   semantics; keep both files aligned when tokens change.
   Dark mode is default (:root). Light mode via [data-theme="light"].
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Primitives (resolved hex values) ─────────────────────── */
:root {
  /* Amber — core: #E8A030 (400) */
  --amber-100: #F9F0E1;
  --amber-200: #F2DBB5;
  --amber-300: #F5C069;
  --amber-400: #E8A030;
  --amber-500: #D4821A;
  --amber-600: #BF6E0C;
  --amber-700: #A05A08;

  /* Olive — core: #454D42 (400) */
  --olive-100: #E5E8E3;
  --olive-200: #B7BDB2;
  --olive-300: #7E8877;
  --olive-400: #454D42;
  --olive-500: #2D322A;
  --olive-600: #1E211C;
  --olive-700: #111311;

  /* Sand — core: #CBBCAA (400) */
  --sand-100: #EBE6E0;
  --sand-200: #E0D6CD;
  --sand-300: #D4C7B9;
  --sand-400: #CBBCAA;
  --sand-500: #A8998A;
  --sand-600: #837567;
  --sand-700: #5A5249;

  /* Sage — core: #6FA85C (400) */
  --sage-100: #E8F0E6;
  --sage-200: #C1D5B8;
  --sage-300: #9ABF8D;
  --sage-400: #6FA85C;
  --sage-500: #4F6B42;
  --sage-600: #3E7030;
  --sage-700: #253D1F;

  /* Ink */
  --ink-300: #8A857A;
  --ink-500: #8A857A;
  --ink-600: #5C5850;
  --ink-900: #1C1F1A;

  /* Alpha scale */
  --amber-alpha-10: rgba(212, 130, 26, 0.10);
  --amber-alpha-20: rgba(212, 130, 26, 0.20);
  --amber-alpha-30: rgba(212, 130, 26, 0.30);
  --amber-alpha-40: rgba(212, 130, 26, 0.40);
  --sage-alpha-10:  rgba(111, 168, 92, 0.10);
  --sage-alpha-20:  rgba(111, 168, 92, 0.20);
  --black-alpha-04: rgba(0, 0, 0, 0.04);
  --black-alpha-15: rgba(0, 0, 0, 0.15);

}

/* ── Dark mode semantic tokens (default) ──────────────────── */
:root {
  /* Surfaces */
  --surface-desktop:    var(--olive-700);
  --surface-card:       var(--olive-600);
  --surface-input:      var(--olive-700);
  --surface-footer:       var(--black-alpha-15);
  --surface-row-hover:    var(--olive-500);
  --surface-row-selected: var(--amber-alpha-10);
  --surface-row-playing:  var(--sage-alpha-10);

  /* Borders */
  --border-default:  var(--olive-500);
  --border-light:    var(--olive-400);
  --border-selected: var(--amber-alpha-30);
  --border-focus:    var(--amber-alpha-40);
  --border-playing:  var(--sage-alpha-20);

  /* Text */
  --text-primary:   var(--sand-100);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--olive-400);
  --text-playing:   var(--sage-400);
  --text-accent:    var(--amber-400);

  /* Accent */
  --accent-default: var(--amber-500);
  --accent-text:    var(--amber-400);
  --accent-glow:    var(--amber-alpha-20);
  --accent-border:  var(--amber-alpha-40);

  /* Status */
  --status-playing:     var(--sage-400);
  --status-playing-dim: var(--sage-500);
  --status-sage:        var(--sage-300);

  /* Shadows */
  --shadow-launcher:     0 0 0 0.5px rgba(255,255,255,0.04) inset;
  --shadow-input-default: inset 0 1px 3px rgba(0,0,0,0.30);
  --shadow-input-focus:  0 0 0 1px rgba(212,130,26,0.40), inset 0 1px 8px rgba(212,130,26,0.08), inset 0 0 24px rgba(212,130,26,0.04);

  /* Interactive */
  --interactive-hover-bg: var(--olive-500);
  --interactive-kbd-bg:   var(--olive-600);
  --interactive-tag-bg:   var(--olive-700);

  /* Scrollbar */
  --scrollbar-thumb: var(--olive-500);
}

/* ── Light mode semantic tokens ───────────────────────────── */
[data-theme="light"] {
  /* Surfaces */
  --surface-desktop:    var(--sand-300);
  --surface-card:       var(--sand-100);
  --surface-input:      var(--sand-200);
  --surface-footer:       var(--black-alpha-04);
  --surface-row-hover:    var(--sand-300);
  --surface-row-selected: var(--amber-alpha-10);
  --surface-row-playing:  var(--sage-alpha-10);

  /* Borders */
  --border-default:  var(--sand-400);
  --border-light:    var(--sand-300);
  --border-selected: var(--amber-alpha-30);
  --border-focus:    var(--amber-alpha-40);
  --border-playing:  var(--sage-alpha-20);

  /* Text */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--sand-500);
  --text-playing:   var(--sage-600);
  --text-accent:    var(--amber-700);

  /* Accent */
  --accent-default: var(--amber-600);
  --accent-text:    var(--amber-700);
  --accent-glow:    var(--amber-alpha-20);
  --accent-border:  var(--amber-alpha-40);

  /* Status */
  --status-playing:     var(--sage-600);
  --status-playing-dim: var(--sage-700);
  --status-sage:        var(--sage-500);

  /* Shadows */
  --shadow-launcher:     0 0 0 0.5px rgba(255,255,255,0.55) inset;
  --shadow-input-default: inset 0 1px 3px rgba(0,0,0,0.06);
  --shadow-input-focus:  0 0 0 1px rgba(191,110,12,0.38), inset 0 1px 8px rgba(191,110,12,0.08), inset 0 0 24px rgba(191,110,12,0.03);

  /* Interactive */
  --interactive-hover-bg: var(--sand-300);
  --interactive-kbd-bg:   var(--sand-200);
  --interactive-tag-bg:   var(--sand-200);

  /* Scrollbar */
  --scrollbar-thumb: var(--sand-300);
}

/* ── Typography tokens ─────────────────────────────────────── */
:root {
  --font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
  --font-sans: 'Inter', -apple-system, sans-serif;

  --text-sound-name:     13px;
  --text-search-input:   13px;
  --text-tag-badge:      9px;
  --text-category-meta:  10px;
  --text-wordmark:       11px;
  --text-column-header:  9px;
  --text-kbd-hint:       9px;
  --text-live-badge:     10px;

  --ls-sound-name:    -0.02em;
  --ls-search-input:  -0.01em;
  --ls-tag-badge:      0.08em;
  --ls-category-meta:  0.04em;  /* wide */
  --ls-wordmark:       0.14em;
  --ls-column-header:  0.10em;
  --ls-kbd-hint:       0.04em;
  --ls-live-badge:     0.06em;  /* wider */
}