/* Design tokens — Classic Library (docs/design-guidelines.md). Do not hardcode hex in components. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600&family=Playfair+Display:wght@500;600;700&family=Literata:opsz,wght@7..72,400;7..72,600&display=swap&subset=vietnamese');

:root {
  color-scheme: light;
  --bg: #FBF7EF;
  --surface: #FFFDF8;
  --surface-sunken: #F3ECDF;
  --ink: #1F1B16;
  --ink-muted: #5E554A;
  --border: #E6DCCB;
  --primary: #7A2E2E;
  --on-primary: #FFFDF8;
  --gold: #B08D57;
  --gold-ink: #7D6230;
  --highlight: #F3E6C4;
  --success: #3F6B4A;
  --danger: #A1332B;

  /* Record sleeves: five leather colours, picked per book by web/js/sleeve-palette.js.
     Same in both themes; every ink/bg pair is ≥4.5:1. */
  --sleeve-wine-bg: #6B2424; --sleeve-wine-deep: #451616; --sleeve-wine-ornament: #C9A45C; --sleeve-wine-ink: #F6ECD6;
  --sleeve-moss-bg: #3F4A33; --sleeve-moss-deep: #262E1F; --sleeve-moss-ornament: #CDB57C; --sleeve-moss-ink: #F1E7CE;
  --sleeve-slate-bg: #34494D; --sleeve-slate-deep: #1F2E32; --sleeve-slate-ornament: #C8AE7A; --sleeve-slate-ink: #EEE7D6;
  --sleeve-amber-bg: #8C5F2C; --sleeve-amber-deep: #5A3A18; --sleeve-amber-ornament: #F0D598; --sleeve-amber-ink: #FFF4DC;
  --sleeve-parchment-bg: #C9B388; --sleeve-parchment-deep: #A48C60; --sleeve-parchment-ornament: #5E3F1E; --sleeve-parchment-ink: #33230F;

  /* Vinyl + brass tonearm */
  --vinyl: #111111;
  --vinyl-rim: #3A3A3A;
  --brass-hi: #EBD29A;
  --brass: #C29A58;
  --brass-lo: #8D6831;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-read: 'Literata', serif;
  --font-ui: 'Be Vietnam Pro', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Near-square corners: printed rules and bound boards, not app pills. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-sheet: 10px;
  --radius-cover: 4px;

  /* Gold hairlines, derived so they follow the active theme's --gold. */
  --gold-soft: color-mix(in srgb, var(--gold) 50%, var(--border));
  --gold-faint: color-mix(in srgb, var(--gold) 28%, transparent);

  --elevation-card: 0 1px 2px rgba(31, 27, 22, .06);
  --elevation-sheet: 0 8px 24px rgba(31, 27, 22, .10);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #1C1915;
  --surface: #26221D;
  --surface-sunken: #15130F;
  --ink: #EDE6D8;
  --ink-muted: #B3A996;
  --border: #3A342C;
  --primary: #D98C7F;
  --on-primary: #1C1915;
  --gold: #C9A66B;
  --gold-ink: #D8BC86;
  --highlight: #3D3424;
  --success: #8DBB98;
  --danger: #E58A80;
  --vinyl-rim: #5A5248;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #1C1915;
    --surface: #26221D;
    --surface-sunken: #15130F;
    --ink: #EDE6D8;
    --ink-muted: #B3A996;
    --border: #3A342C;
    --primary: #D98C7F;
    --on-primary: #1C1915;
    --gold: #C9A66B;
    --gold-ink: #D8BC86;
    --highlight: #3D3424;
    --success: #8DBB98;
    --danger: #E58A80;
    --vinyl-rim: #5A5248;
  }
}