/* ============================================================
   THE B-SIDE — Design tokens
   Color · Typography · Spacing · Effects
   Carried over from the B-Side design system.
   ============================================================ */

:root {
  /* ---- Parchment / paper (warm neutral lights) ---- */
  --parchment-50:  #F6EFE2;  /* lightest paper, page wash */
  --parchment-100: #EFE4D1;
  --parchment-200: #E4D4BA;  /* cover-art field */
  --parchment-300: #D9C49C;  /* aged 45 label cream */
  --parchment-400: #C7AE83;

  /* ---- Sepia / brown (turntable casing, warm darks) ---- */
  --sepia-600: #6B5B45;
  --sepia-700: #4A3D2C;
  --sepia-800: #2E281F;
  --sepia-900: #1F1B14;

  /* ---- Ink / vinyl (near-blacks) ---- */
  --vinyl-900: #14120E;   /* record black */
  --ink-900:   #16140F;   /* primary text on paper */
  --ink-700:   #322C22;   /* softened ink */

  /* ---- Rust (the 45 label / brand accent) ---- */
  --rust-300: #D08A6B;
  --rust-400: #C26A4A;    /* hover / lighter */
  --rust-500: #AF4B2C;    /* PRIMARY brand red */
  --rust-600: #8F3B22;    /* pressed / deeper */
  --rust-700: #6E2C19;

  /* ---- Brass / needle (rare metallic warm highlight) ---- */
  --brass-400: #B89B6A;
  --brass-300: #CDB488;

  /* ---- Functional ---- */
  --success-600: #5E6B3A;  /* olive, era-appropriate */
  --danger-600:  #8F2E22;
  --paper-line:  rgba(31, 27, 20, 0.14);    /* hairline on paper */
  --ink-line:    rgba(230, 214, 196, 0.16); /* hairline on dark */

  /* ---- Semantic aliases — default theme: "Paper" ---- */
  --bg-page:        var(--parchment-100);
  --bg-page-deep:   var(--parchment-200);
  --surface-card:   var(--parchment-50);
  --surface-raised: #FBF6EC;
  --surface-sunken: var(--parchment-200);
  --surface-inverse: var(--sepia-900);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--sepia-700);
  --text-muted:     var(--sepia-600);
  --text-on-accent: var(--parchment-50);
  --text-on-dark:   var(--parchment-100);

  --accent:         var(--rust-500);
  --accent-hover:   var(--rust-400);
  --accent-press:   var(--rust-600);
  --accent-quiet:   rgba(175, 75, 44, 0.12);

  --border-subtle:  var(--paper-line);
  --border-strong:  rgba(31, 27, 20, 0.28);
  --focus-ring:     var(--rust-500);

  /* ---- Typography ---- */
  --font-serif:     "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans:      "Anybody", "Helvetica Neue", Arial, sans-serif;
  --font-condensed: "Anybody Condensed", "Anybody", "Arial Narrow", sans-serif;

  --font-display:   var(--font-serif);
  --font-body:      var(--font-sans);
  --font-kicker:    var(--font-sans);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  33px;
  --text-3xl:  42px;
  --text-4xl:  54px;
  --text-5xl:  68px;
  --text-6xl:  88px;
  --text-7xl:  116px;

  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-kicker: 0.22em;

  /* ---- Spacing, radii, sizing (base unit 4px) ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  --radius-disc: 50%;

  --container-prose: 68ch;
  --container-narrow: 720px;
  --container-base:  1080px;
  --container-wide:  1320px;

  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;
  --tap-min: 44px;

  /* ---- Effects: warm-tinted, soft (print/photo feel) ---- */
  --shadow-xs:  0 1px 2px rgba(31, 27, 20, 0.10);
  --shadow-sm:  0 2px 6px rgba(31, 27, 20, 0.12);
  --shadow-md:  0 6px 18px rgba(31, 27, 20, 0.16);
  --shadow-lg:  0 14px 36px rgba(31, 27, 20, 0.22);
  --shadow-xl:  0 28px 70px rgba(20, 18, 14, 0.34);
  --shadow-inset: inset 0 1px 2px rgba(31, 27, 20, 0.14);
  --shadow-disc: 0 4px 10px rgba(0, 0, 0, 0.45);

  --texture-paper: url("../assets/background-texture.png");
  --grain-opacity: 0.5;

  --vignette: radial-gradient(120% 120% at 50% 40%,
              transparent 55%, rgba(20, 18, 14, 0.45) 100%);
  --scrim-bottom: linear-gradient(to top,
              rgba(20, 18, 14, 0.82) 0%,
              rgba(20, 18, 14, 0.4) 38%,
              transparent 72%);

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.5, 0, 0.75, 0);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
  --dur-record: 800ms;
}

/* ============================================================
   THEME: "Vinyl" — dark, for hero blocks, players, footer
   ============================================================ */
[data-theme="vinyl"] {
  --bg-page:        var(--vinyl-900);
  --bg-page-deep:   #0E0D0A;
  --surface-card:   var(--sepia-900);
  --surface-raised: var(--sepia-800);
  --surface-sunken: #100E0A;
  --surface-inverse: var(--parchment-100);

  --text-primary:   var(--parchment-100);
  --text-secondary: var(--parchment-400);
  --text-muted:     var(--sepia-600);
  --text-on-accent: var(--parchment-50);
  --text-on-dark:   var(--parchment-100);

  --accent:         var(--rust-500);
  --accent-hover:   var(--rust-400);
  --accent-press:   var(--rust-600);
  --accent-quiet:   rgba(175, 75, 44, 0.18);

  --border-subtle:  var(--ink-line);
  --border-strong:  rgba(230, 214, 196, 0.30);
  --focus-ring:     var(--rust-400);
}