/* ============================================================================
   Books&Moods — design tokens
   Deep midnight/navy chrome, warm paper reading surfaces, restrained gold.
   Light tokens on :root; dark reader theme applied via [data-reader-theme].
   ============================================================================ */

:root {
  /* Brand chrome (navigation, footer, hero, cards outside the reader) */
  --bm-navy-950: #070b14;
  --bm-navy-900: #0b1220;
  --bm-navy-800: #121a2c;
  --bm-navy-700: #1b2740;
  --bm-navy-600: #283656;

  --bm-ivory-50: #fdfbf7;
  --bm-ivory-100: #f7f3ec;
  --bm-ivory-200: #efe7d8;

  --bm-gold-400: #d9b768;
  --bm-gold-500: #c9a24b;
  --bm-gold-600: #a9823a;

  --bm-ink-900: #14110d;
  --bm-ink-700: #3a352c;
  --bm-ink-500: #6b6558;
  --bm-ink-300: #a39c8c;

  --bm-success: #4f9a72;
  --bm-error: #c9564b;

  /* Semantic tokens */
  --bm-bg: var(--bm-ivory-50);
  --bm-surface: #ffffff;
  --bm-surface-muted: var(--bm-ivory-100);
  --bm-text: var(--bm-ink-900);
  --bm-text-muted: var(--bm-ink-500);
  --bm-chrome-bg: var(--bm-navy-900);
  --bm-chrome-text: var(--bm-ivory-100);
  --bm-chrome-text-muted: #aab3c6;
  --bm-accent: var(--bm-gold-500);
  --bm-accent-strong: var(--bm-gold-600);
  --bm-border: rgba(20, 17, 13, 0.1);
  --bm-border-chrome: rgba(244, 233, 216, 0.14);
  --bm-focus-ring: #6ea8ff;

  /* Glass surfaces used on the hero / player / cards over imagery */
  --bm-glass-bg: rgba(11, 18, 32, 0.55);
  --bm-glass-border: rgba(244, 233, 216, 0.16);
  --bm-glass-blur: 16px;

  /* Type */
  --bm-font-display: 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --bm-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bm-font-reader: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  /* Spacing scale (4px base) */
  --bm-space-1: 4px;
  --bm-space-2: 8px;
  --bm-space-3: 12px;
  --bm-space-4: 16px;
  --bm-space-5: 20px;
  --bm-space-6: 24px;
  --bm-space-8: 32px;
  --bm-space-10: 40px;
  --bm-space-12: 48px;
  --bm-space-16: 64px;

  /* Radii */
  --bm-radius-sm: 8px;
  --bm-radius-md: 14px;
  --bm-radius-lg: 22px;
  --bm-radius-pill: 999px;

  /* Shadow */
  --bm-shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.12);
  --bm-shadow-md: 0 8px 24px rgba(11, 18, 32, 0.16);
  --bm-shadow-lg: 0 20px 48px rgba(11, 18, 32, 0.28);

  /* Motion */
  --bm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bm-duration-fast: 140ms;
  --bm-duration-base: 220ms;
  --bm-duration-slow: 360ms;

  /* z-index scale */
  --bm-z-nav: 40;
  --bm-z-player: 50;
  --bm-z-drawer: 60;
  --bm-z-modal: 70;
  --bm-z-toast: 80;

  /* Layout */
  --bm-content-max: 1180px;
  --bm-reader-measure: 38rem;
  --bm-player-height: 76px;
  --bm-bottom-nav-height: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bm-duration-fast: 0ms;
    --bm-duration-base: 0ms;
    --bm-duration-slow: 0ms;
  }
}