/* SONDER · design tokens
   Derived from the Hero (HeroStaggerCrowd v6).
   Three families only. One accent. */

:root {
  /* surface */
  --bg:        #0d0c09;
  --bg-2:      #14130f;
  --bg-3:      #1d1b16;
  --fg:        #e8dcc1;       /* warm cream — matches hero text */
  --fg-dim:    rgba(232, 220, 193, 0.62);
  --fg-mute:   rgba(232, 220, 193, 0.42);
  --fg-faint:  rgba(232, 220, 193, 0.22);
  --rule:      rgba(232, 220, 193, 0.14);
  --rule-hi:   rgba(232, 220, 193, 0.28);

  /* the single accent — only icons, status, audio-active state */
  --accent:    #c8a14a;       /* projector gold */
  --accent-hi: #e6bd5e;       /* slightly brighter, when audio plays */

  /* type */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --cond:  "Bebas Neue", "Oswald", Impact, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  /* No --sans token: the site uses exactly three families (serif / cond / mono). */

  /* layout */
  --max-w:  1320px;
  --pad:    clamp(1.25rem, 4vw, 4rem);

  /* motion */
  --t-fast: 120ms ease;
  --t-base: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── WARM MOOD ─────────────────────────────────────
   Flips the surface scale: warm cream paper, deep-ink text.
   Only colors swap; type, accents, motion stay identical. */
html[data-mood="warm"] {
  --bg:        #e8dcc1;
  --bg-2:      #ddd0b3;
  --bg-3:      #d2c4a5;
  --fg:        #0d0c09;
  --fg-dim:    rgba(13, 12, 9, 0.66);
  --fg-mute:   rgba(13, 12, 9, 0.46);
  --fg-faint:  rgba(13, 12, 9, 0.22);
  --rule:      rgba(13, 12, 9, 0.14);
  --rule-hi:   rgba(13, 12, 9, 0.28);
  --accent:    #9c7a2c;       /* warm tone needs a deeper gold to read */
  --accent-hi: #b89234;
}

/* ── CANDLE MOOD ───────────────────────────────────
   Deeper than dark — like a room lit by a single flame.
   Background almost-black with a brown undertone, foreground
   slightly warmer than dark mode. Accent shifts to a hotter
   amber so it reads as fire, not gold. A flicker-vignette
   layer is added on top via body::after (see base.css). */
html[data-mood="candle"] {
  --bg:        #4a3618;       /* lighter, more golden — like a lit room */
  --bg-2:      #553e1c;
  --bg-3:      #614620;
  --fg:        #f5c878;       /* bright warm gold — firelight glow */
  --fg-dim:    rgba(245, 200, 120, 0.66);
  --fg-mute:   rgba(245, 200, 120, 0.46);
  --fg-faint:  rgba(245, 200, 120, 0.24);
  --rule:      rgba(245, 200, 120, 0.18);
  --rule-hi:   rgba(245, 200, 120, 0.34);
  --accent:    #ffb43c;       /* radiant amber */
  --accent-hi: #ffd070;
}

/* Smooth transitions when flipping moods (excludes hero React inline styles) */
body, header, footer, section,
.brand, .nav a, .btn, .btn-ghost,
.player-bar, .listening-room, .reel-modal {
  transition:
    background-color 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}