/*
 * ═══════════════════════════════════════════════════════════════
 *  THEMING SYSTEM
 *
 *  Two token layers:
 *    --primitive-*  Raw color values. Never used in component CSS.
 *    --color-*      Semantic role names. Used everywhere.
 *
 *  Legacy aliases (--bg, --surface, --accent, etc.) map to the
 *  semantic tokens so JS template-literal inline styles keep working.
 *
 *  Adding a theme: add a [data-theme="name"] block, copy the
 *  semantic + alias sections, remap the primitives. Zero component
 *  CSS changes required.
 *
 *  WCAG AA (4.5:1) contrast — dark theme (bg L≈0.009)
 *    --color-text-primary   #ede5d4  16.3:1 ✓
 *    --color-text-secondary #8a8070   5.0:1 ✓
 *    --color-accent         #c9a96e   8.3:1 ✓
 *    --color-danger         #c96e6e   5.1:1 ✓
 *    --color-success        #7ac97a   9.2:1 ✓
 *    text-on-accent #14110a on #c9a96e  9.1:1 ✓
 *
 *  WCAG AA — light theme (bg #edeae3, L≈0.853)
 *    --color-text-primary   #1e1a14  13.4:1 ✓
 *    --color-text-secondary #6a5c4a   5.2:1 ✓
 *    --color-accent         #7a5018   5.3:1 ✓
 *    --color-danger         #b83232   4.6:1 ✓
 *    --color-success        #287228   4.6:1 ✓
 *    text-on-accent #ffffff on #7a5018  6.3:1 ✓
 * ═══════════════════════════════════════════════════════════════
 */

/* ── DARK (default — no attribute needed) ────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --primitive-brown-950:   #0e0d0b;
  --primitive-brown-900:   #17150f;
  --primitive-brown-800:   #1e1c16;
  --primitive-brown-780:   #1a1810;
  --primitive-brown-760:   #201e10;
  --primitive-brown-750:   #252218;
  --primitive-brown-700:   #2c2920;
  --primitive-brown-600:   #4a4030;
  --primitive-brown-500:   #201e14;
  --primitive-gold-300:    #d4b87e;
  --primitive-gold-400:    #c9a96e;
  --primitive-gold-600:    #8a7149;
  --primitive-ink-50:      #ede5d4;
  --primitive-ink-500:     #8a8070;
  --primitive-ink-950:     #14110a;
  --primitive-ink-960:     #1e1a10;
  --primitive-red-400:     #c96e6e;
  --primitive-red-700:     #4a2a2a;
  --primitive-red-800:     #2e1a1a;
  --primitive-red-300:     #e08080;
  --primitive-green-400:   #7ac97a;
  --primitive-green-700:   #2e4e2e;
  --primitive-green-800:   #1a2e1a;
  --primitive-blue-400:    #8888cc;
  --primitive-blue-700:    #2a2a4e;
  --primitive-blue-800:    #1a1a2e;
  --primitive-purple-400:  #b08ac0;
  --primitive-purple-700:  #3a2a4a;
  --primitive-purple-800:  #1e1420;

  /* Backgrounds */
  --color-bg-page:           var(--primitive-brown-950);
  --color-bg-raised:         var(--primitive-brown-900);
  --color-bg-card:           var(--primitive-brown-800);
  --color-bg-card-hover:     var(--primitive-brown-750);
  --color-bg-overlay:        rgba(0,0,0,0.85);
  --color-bg-selection:      var(--primitive-brown-760);
  --color-bg-bulk-bar:       var(--primitive-brown-780);
  --color-bg-sel-btn:        rgba(14,13,11,0.8);
  --color-bg-auth-gradient:  var(--primitive-ink-960);

  /* Borders */
  --color-border-default:    var(--primitive-brown-700);
  --color-border-hover:      var(--primitive-brown-600);
  --color-border-focus:      var(--primitive-gold-600);

  /* Text */
  --color-text-primary:      var(--primitive-ink-50);
  --color-text-secondary:    var(--primitive-ink-500);
  --color-text-on-accent:    var(--primitive-ink-950);

  /* Accent */
  --color-accent:            var(--primitive-gold-400);
  --color-accent-hover:      var(--primitive-gold-300);
  --color-accent-subtle:     var(--primitive-gold-600);
  --color-accent-surface:    var(--primitive-brown-500);
  --color-gold:              var(--primitive-gold-400);

  /* Danger */
  --color-danger:            var(--primitive-red-400);
  --color-danger-surface:    var(--primitive-red-800);
  --color-danger-border:     var(--primitive-red-700);
  --color-danger-text:       var(--primitive-red-300);

  /* Success */
  --color-success:           var(--primitive-green-400);
  --color-success-surface:   var(--primitive-green-800);
  --color-success-border:    var(--primitive-green-700);

  /* Category badges */
  --color-badge-type-text:      var(--primitive-blue-400);
  --color-badge-type-surface:   var(--primitive-blue-800);
  --color-badge-type-border:    var(--primitive-blue-700);
  --color-badge-series-text:    var(--primitive-purple-400);
  --color-badge-series-surface: var(--primitive-purple-800);
  --color-badge-series-border:  var(--primitive-purple-700);

  /* Shadow — flat in dark mode */
  --color-shadow-card:       none;
  --color-shadow-modal:      none;

  /* Legacy aliases for JS inline styles */
  --bg:       var(--color-bg-page);
  --surface:  var(--color-bg-raised);
  --card:     var(--color-bg-card);
  --card-h:   var(--color-bg-card-hover);
  --border:   var(--color-border-default);
  --border-h: var(--color-border-hover);
  --accent:   var(--color-accent);
  --accent-dk: var(--color-accent-subtle);
  --text:     var(--color-text-primary);
  --muted:    var(--color-text-secondary);
  --danger:   var(--color-danger);
  --green:    var(--color-success);
  --green-bg: var(--color-success-surface);
  --green-br: var(--color-success-border);
}

/* ── LIGHT — The Private Reading Room (OS preference) ───────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    /* Parchment greys */
    --primitive-warm-950:    #1a1814;   /* Inkwell — warm near-black body text      */
    --primitive-warm-800:    #f5f0e8;   /* Parchment — page bg, bookish warmth       */
    --primitive-warm-750:    #ede8df;   /* Raised — header / toolbar surface         */
    --primitive-warm-700:    #e5dfd5;   /* Auth gradient stop                        */
    --primitive-warm-600:    #d4ccc0;   /* Border — visible against white cards      */
    --primitive-warm-500:    #bfb299;   /* Border hover                              */
    --primitive-warm-0:      #ffffff;   /* Card white — floats above parchment       */
    --primitive-warm-50:     #faf7f2;   /* Card hover                                */
    /* Lamplight ambers */
    --primitive-amber-bright: #c9824a;  /* Lamplight — decorative, large text only   */
    --primitive-amber-500:   #8a5520;   /* Lamplight dark — buttons/links AA ≥4.9:1  */
    --primitive-amber-600:   #7a4818;   /* Button hover                              */
    --primitive-amber-700:   #a06030;   /* Subtle accent text, metadata              */
    --primitive-amber-50:    #fdf4ec;   /* Accent surface tint                       */
    --primitive-amber-100:   #f5e4cc;   /* Accent border                             */
    /* Gilt — stars / progress fills */
    --primitive-gold-500:    #d4a84b;   /* Gilt — warm gold, not garish             */
    /* Sepia text */
    --primitive-ink-600:     #6b5e4a;   /* Sepia — secondary text AA ≥5.3:1         */
    --primitive-white:       #ffffff;
    /* Status */
    --primitive-red-500:     #c03a2b;   /* Wax Seal                                 */
    --primitive-red-50:      #fdf0ee;
    --primitive-red-200:     #f0c4be;
    --primitive-green-500:   #2d6a4f;   /* Forest                                   */
    --primitive-green-50:    #edf5f0;
    --primitive-green-200:   #b8d4c8;
    --primitive-blue-500:    #2a3a9e;
    --primitive-blue-50:     #eef0fc;
    --primitive-blue-200:    #c0c8f0;
    --primitive-purple-500:  #6b3080;
    --primitive-purple-50:   #f5eef9;
    --primitive-purple-200:  #ddc8f0;

    --color-bg-page:           var(--primitive-warm-800);
    --color-bg-raised:         var(--primitive-warm-750);
    --color-bg-card:           var(--primitive-warm-0);
    --color-bg-card-hover:     var(--primitive-warm-50);
    --color-bg-overlay:        rgba(26,24,20,0.65);
    --color-bg-selection:      var(--primitive-amber-50);
    --color-bg-bulk-bar:       var(--primitive-warm-750);
    --color-bg-sel-btn:        rgba(245,240,232,0.92);
    --color-bg-auth-gradient:  var(--primitive-warm-700);

    --color-border-default:    var(--primitive-warm-600);
    --color-border-hover:      var(--primitive-warm-500);
    --color-border-focus:      var(--primitive-amber-500);

    --color-text-primary:      var(--primitive-warm-950);
    --color-text-secondary:    var(--primitive-ink-600);
    --color-text-on-accent:    var(--primitive-white);

    --color-accent:            var(--primitive-amber-500);
    --color-accent-hover:      var(--primitive-amber-600);
    --color-accent-subtle:     var(--primitive-amber-bright);
    --color-accent-surface:    var(--primitive-amber-50);
    --color-gold:              var(--primitive-gold-500);

    --color-danger:            var(--primitive-red-500);
    --color-danger-surface:    var(--primitive-red-50);
    --color-danger-border:     var(--primitive-red-200);
    --color-danger-text:       var(--primitive-red-500);

    --color-success:           var(--primitive-green-500);
    --color-success-surface:   var(--primitive-green-50);
    --color-success-border:    var(--primitive-green-200);

    --color-badge-type-text:      var(--primitive-blue-500);
    --color-badge-type-surface:   var(--primitive-blue-50);
    --color-badge-type-border:    var(--primitive-blue-200);
    --color-badge-series-text:    var(--primitive-purple-500);
    --color-badge-series-surface: var(--primitive-purple-50);
    --color-badge-series-border:  var(--primitive-purple-200);

    --color-shadow-card:  0 1px 4px rgba(50,35,10,0.08), 0 1px 2px rgba(50,35,10,0.05);
    --color-shadow-modal: 0 8px 40px rgba(50,35,10,0.16), 0 2px 10px rgba(50,35,10,0.09);

    --bg:       var(--color-bg-page);
    --surface:  var(--color-bg-raised);
    --card:     var(--color-bg-card);
    --card-h:   var(--color-bg-card-hover);
    --border:   var(--color-border-default);
    --border-h: var(--color-border-hover);
    --accent:   var(--color-accent);
    --accent-dk: var(--color-accent-subtle);
    --text:     var(--color-text-primary);
    --muted:    var(--color-text-secondary);
    --danger:   var(--color-danger);
    --green:    var(--color-success);
    --green-bg: var(--color-success-surface);
    --green-br: var(--color-success-border);
  }
}

/* ── LIGHT (explicit JS override) ────────────────────────────── */
/*
 * Intentional duplicate of the media-query block above.
 * Pure CSS can't avoid this without a preprocessor — keeping
 * both blocks in sync is the only maintenance requirement when
 * editing light theme values.
 */
[data-theme="light"] {
  color-scheme: light;

  --primitive-warm-950:    #1a1814;
  --primitive-warm-800:    #f5f0e8;
  --primitive-warm-750:    #ede8df;
  --primitive-warm-700:    #e5dfd5;
  --primitive-warm-600:    #d4ccc0;
  --primitive-warm-500:    #bfb299;
  --primitive-warm-0:      #ffffff;
  --primitive-warm-50:     #faf7f2;
  --primitive-amber-bright: #c9824a;
  --primitive-amber-500:   #8a5520;
  --primitive-amber-600:   #7a4818;
  --primitive-amber-700:   #a06030;
  --primitive-amber-50:    #fdf4ec;
  --primitive-amber-100:   #f5e4cc;
  --primitive-gold-500:    #d4a84b;
  --primitive-ink-600:     #6b5e4a;
  --primitive-white:       #ffffff;
  --primitive-red-500:     #c03a2b;
  --primitive-red-50:      #fdf0ee;
  --primitive-red-200:     #f0c4be;
  --primitive-green-500:   #2d6a4f;
  --primitive-green-50:    #edf5f0;
  --primitive-green-200:   #b8d4c8;
  --primitive-blue-500:    #2a3a9e;
  --primitive-blue-50:     #eef0fc;
  --primitive-blue-200:    #c0c8f0;
  --primitive-purple-500:  #6b3080;
  --primitive-purple-50:   #f5eef9;
  --primitive-purple-200:  #ddc8f0;

  --color-bg-page:           var(--primitive-warm-800);
  --color-bg-raised:         var(--primitive-warm-750);
  --color-bg-card:           var(--primitive-warm-0);
  --color-bg-card-hover:     var(--primitive-warm-50);
  --color-bg-overlay:        rgba(26,24,20,0.65);
  --color-bg-selection:      var(--primitive-amber-50);
  --color-bg-bulk-bar:       var(--primitive-warm-750);
  --color-bg-sel-btn:        rgba(245,240,232,0.92);
  --color-bg-auth-gradient:  var(--primitive-warm-700);

  --color-border-default:    var(--primitive-warm-600);
  --color-border-hover:      var(--primitive-warm-500);
  --color-border-focus:      var(--primitive-amber-500);

  --color-text-primary:      var(--primitive-warm-950);
  --color-text-secondary:    var(--primitive-ink-600);
  --color-text-on-accent:    var(--primitive-white);

  --color-accent:            var(--primitive-amber-500);
  --color-accent-hover:      var(--primitive-amber-600);
  --color-accent-subtle:     var(--primitive-amber-bright);
  --color-accent-surface:    var(--primitive-amber-50);
  --color-gold:              var(--primitive-gold-500);

  --color-danger:            var(--primitive-red-500);
  --color-danger-surface:    var(--primitive-red-50);
  --color-danger-border:     var(--primitive-red-200);
  --color-danger-text:       var(--primitive-red-500);

  --color-success:           var(--primitive-green-500);
  --color-success-surface:   var(--primitive-green-50);
  --color-success-border:    var(--primitive-green-200);

  --color-badge-type-text:      var(--primitive-blue-500);
  --color-badge-type-surface:   var(--primitive-blue-50);
  --color-badge-type-border:    var(--primitive-blue-200);
  --color-badge-series-text:    var(--primitive-purple-500);
  --color-badge-series-surface: var(--primitive-purple-50);
  --color-badge-series-border:  var(--primitive-purple-200);

  --color-shadow-card:  0 1px 4px rgba(50,35,10,0.08), 0 1px 2px rgba(50,35,10,0.05);
  --color-shadow-modal: 0 8px 40px rgba(50,35,10,0.16), 0 2px 10px rgba(50,35,10,0.09);

  --bg:       var(--color-bg-page);
  --surface:  var(--color-bg-raised);
  --card:     var(--color-bg-card);
  --card-h:   var(--color-bg-card-hover);
  --border:   var(--color-border-default);
  --border-h: var(--color-border-hover);
  --accent:   var(--color-accent);
  --accent-dk: var(--color-accent-subtle);
  --text:     var(--color-text-primary);
  --muted:    var(--color-text-secondary);
  --danger:   var(--color-danger);
  --green:    var(--color-success);
  --green-bg: var(--color-success-surface);
  --green-br: var(--color-success-border);
}