/* ═══════════════════════════════════════════════
   SHOWUP — DESIGN TOKENS (Mixtape Side A)
   Source of truth: MIXTAPE_SPEC.md §4
   ═══════════════════════════════════════════════ */

:root,
:root[data-theme="side-a"] {
  /* ── Side A palette ──────────────────────────── */
  --paper:       #F4ECD8;
  --paper-deep:  #ECE1C6;
  --paper-edge:  #DCCFA6;
  --ink:         #2A1F1A;
  --ink-soft:    #5A463A;
  --ink-faint:   #9C8874;
  --red:         #C3342B;
  --red-hover:   #A62822;
  --red-wash:    #F5D9D5;
  --blue:        #4F6C8E;
  --yellow:      #E8B33A;
  --green:       #3E5C3A;
  --hairline:    #D4C3A1;

  /* ── Bookshelf (diary tab) ───────────────────── */
  --shelf-bg:     #C9B890;
  --shelf-top:    #B8A67A;
  --shelf-shadow: rgba(42, 31, 26, 0.18);
  --shelf-wall:   rgba(220, 207, 166, 0.4);

  /* Role-based supporting accent. Side B overrides --blue to #5EAAA8,
     so this token auto-resolves per theme. */
  --accent-support: var(--blue);

  /* ── Legacy color aliases (retired in Step 2) ── */
  --color-primary:       var(--red);
  --color-primary-hover: var(--red-hover);
  --color-amber:         var(--yellow);
  --bg:                  var(--paper);
  --bg-surface:          var(--paper-deep);
  --bg-subtle:           var(--paper-edge);
  --border:              var(--hairline);
  --border-faint:        var(--paper-edge);
  --text:                var(--ink);
  --text-muted:          var(--ink-soft);
  --text-faint:          var(--ink-faint);

  /* ── Typography ──────────────────────────────── */
  --font-logo:    'Sora', sans-serif;
  --font-display: 'Fraunces', serif;
  --font-body:    'Manrope', sans-serif;
  --font-hand:    'Caveat', cursive;
  --font-mono:    'DM Mono', monospace;

  /* Legacy font aliases (retired in Step 2) */
  --font-heading: var(--font-display);
  --font-base:    var(--font-body);

  /* User-selectable badge fonts (monthly setup) */
  --font-handwritten: 'Caveat', cursive;
  --font-chunky:      'Fredoka One', cursive;
  --font-elegant:     'Playfair Display', serif;
  --font-pixel:       'Pixelify Sans', sans-serif;

  /* ── Spacing ─────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;

  /* Legacy radius aliases */
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   24px;
  --radius-full: 99px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-soft: 0 1px 2px rgba(42, 31, 26, 0.06), 0 2px 6px rgba(42, 31, 26, 0.04);
  --shadow-card: 0 2px 4px rgba(42, 31, 26, 0.08), 0 8px 24px rgba(42, 31, 26, 0.06);

  /* Legacy shadow aliases */
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-card);
  --shadow-lg: 0 8px 32px rgba(42, 31, 26, 0.14);

  /* ── Transitions ─────────────────────────────── */
  --transition: 0.2s ease;

  /* ── Status tiers (shared by progress bars, fw-badges, fw-dots, summary-week-chips, status pills) ── */
  --status-hit:        #3E5C3A;
  --status-hit-wash:   rgba(62, 92, 58, 0.12);
  --status-hit-border: rgba(62, 92, 58, 0.35);

  --status-caution:        #B8860B;
  --status-caution-wash:   rgba(184, 134, 11, 0.10);
  --status-caution-border: rgba(184, 134, 11, 0.30);

  --status-miss:        #C3342B;
  --status-miss-wash:   rgba(195, 52, 43, 0.10);
  --status-miss-border: rgba(195, 52, 43, 0.30);

  /* ── Pace badges (5 states) ── */
  --pace-ahead:        #3E5C3A;
  --pace-ahead-wash:   rgba(62, 92, 58, 0.12);
  --pace-ahead-border: rgba(62, 92, 58, 0.35);

  --pace-ontrack:        #4F6C8E;
  --pace-ontrack-wash:   rgba(79, 108, 142, 0.12);
  --pace-ontrack-border: rgba(79, 108, 142, 0.30);

  --pace-behind:        #C3342B;
  --pace-behind-wash:   rgba(195, 52, 43, 0.10);
  --pace-behind-border: rgba(195, 52, 43, 0.30);

  --pace-early:        #4F6C8E;
  --pace-early-wash:   rgba(79, 108, 142, 0.08);
  --pace-early-border: rgba(79, 108, 142, 0.25);

  --pace-started:        #3E5C3A;
  --pace-started-wash:   rgba(62, 92, 58, 0.08);
  --pace-started-border: rgba(62, 92, 58, 0.25);

  /* ── Progress bar fill aliases (alias the status tiers) ── */
  --bar-hit:     var(--status-hit);
  --bar-caution: var(--status-caution);
  --bar-miss:    var(--status-miss);

  /* ── Full-week empty overlay ── */
  /* 0.72 alpha + 4px backdrop blur lets the calendar grid behind the
     overlay show through as a soft suggestion of structure, so the user
     still gets a sense of what section is being covered. */
  --fw-overlay: rgba(244, 236, 216, 0.72);

  /* ── Milestone treatment (feed event cards) ── */
  --milestone-wash:         color-mix(in srgb, #E8B33A 5%, #ECE1C6);
  --milestone-badge-bg:     rgba(184, 134, 11, 0.18);
  --milestone-badge-color:  #8A6A14;
  --milestone-badge-border: rgba(184, 134, 11, 0.45);
  --milestone-badge-glow:   0 0 14px rgba(232, 179, 58, 0.65), 0 0 5px rgba(232, 179, 58, 0.45);
  /* Cream-white shimmer reads against the gold badge on Side A's
     warm paper background; pure yellow disappears into the surface. */
  --milestone-shimmer:      rgba(255, 240, 200, 0.75);
}

/* ═══════════════════════════════════════════════
   Side B — Warm leather (dark theme)
   Source of truth: MIXTAPE_SPEC.md §4
   Every consumer-facing token gets overridden so component CSS
   does not need to change identifiers (e.g. var(--ink) still works).
   ═══════════════════════════════════════════════ */
[data-theme="side-b"] {
  --paper:       #2A1518;
  --paper-deep:  #1D0E10;
  --paper-edge:  #3A1D20;
  --ink:         #F0DCCF;
  --ink-soft:    #B18A84;
  --ink-faint:   #6E504B;
  --red:         #F07A5E;
  --red-hover:   #D85A3E;
  --red-wash:    rgba(240, 122, 94, 0.18);
  --blue:        #5EAAA8;
  --yellow:      #E8B33A;
  --green:       #5EAAA8;
  --hairline:    #4A2025;

  /* ── Bookshelf (diary tab) ───────────────────── */
  --shelf-bg:     #3A1D20;
  --shelf-top:    #4A2528;
  --shelf-shadow: rgba(0, 0, 0, 0.4);
  --shelf-wall:   rgba(58, 29, 32, 0.5);

  /* Side B shadow tuning — maroon absorbs shadow, use lower opacity */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.4);

  /* ── Status tiers ── */
  --status-hit:        #5EAAA8;
  --status-hit-wash:   rgba(94, 170, 168, 0.14);
  --status-hit-border: rgba(94, 170, 168, 0.40);

  --status-caution:        #E8B33A;
  --status-caution-wash:   rgba(232, 179, 58, 0.12);
  --status-caution-border: rgba(232, 179, 58, 0.32);

  --status-miss:        #F07A5E;
  --status-miss-wash:   rgba(240, 122, 94, 0.12);
  --status-miss-border: rgba(240, 122, 94, 0.32);

  /* ── Pace badges ── */
  --pace-ahead:        #5EAAA8;
  --pace-ahead-wash:   rgba(94, 170, 168, 0.14);
  --pace-ahead-border: rgba(94, 170, 168, 0.40);

  --pace-ontrack:        #5EAAA8;
  --pace-ontrack-wash:   rgba(94, 170, 168, 0.10);
  --pace-ontrack-border: rgba(94, 170, 168, 0.30);

  --pace-behind:        #F07A5E;
  --pace-behind-wash:   rgba(240, 122, 94, 0.12);
  --pace-behind-border: rgba(240, 122, 94, 0.32);

  --pace-early:        #5EAAA8;
  --pace-early-wash:   rgba(94, 170, 168, 0.08);
  --pace-early-border: rgba(94, 170, 168, 0.25);

  --pace-started:        #5EAAA8;
  --pace-started-wash:   rgba(94, 170, 168, 0.08);
  --pace-started-border: rgba(94, 170, 168, 0.25);

  /* ── Full-week empty overlay ── */
  --fw-overlay: rgba(42, 21, 24, 0.72);

  /* ── Milestone treatment (feed event cards) ── */
  --milestone-wash:         color-mix(in srgb, #E8B33A 4%, #1D0E10);
  --milestone-badge-bg:     rgba(232, 179, 58, 0.14);
  --milestone-badge-color:  #E8B33A;
  --milestone-badge-border: rgba(232, 179, 58, 0.35);
  --milestone-badge-glow:   0 0 12px rgba(232, 179, 58, 0.45), 0 0 5px rgba(232, 179, 58, 0.30);
  --milestone-shimmer:      rgba(255, 220, 130, 0.35);
}