/* Minimal reset — folded into tokens.css, no separate file */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; }

/* ─── Brand palette ────────────────────────────────────────
   Coffee Bean  #0F0915  Warm near-black, purple undertone
   Dusk Blue    #3F506B  Mid-tone blue-grey
   Hot Berry    #C6316F  Primary brand accent — magenta/deep pink
   Old Rose     #B97D98  Muted secondary pink
   Soft Linen   #EAE6DD  Warm off-white
   Soft Pink    #F4E3EC  Very light pink, near-white
   ─────────────────────────────────────────────────────── */

:root {
  /* Palette aliases — refer to these everywhere, never raw hex */
  --palette-coffee-bean:  #0F0915;
  --palette-dusk-blue:    #3F506B;
  --palette-hot-berry:    #C6316F;
  --palette-old-rose:     #B97D98;
  --palette-soft-linen:   #EAE6DD;
  --palette-soft-pink:    #F4E3EC;

  /* ── Light mode semantic tokens ── */
  --color-bg:             #EAE6DD;  /* Soft Linen — warm page background */
  --color-surface:        #FFFFFF;  /* White — cards and panels */
  --color-surface-alt:    #F4E3EC;  /* Soft Pink — secondary surfaces, hover states */
  --color-border:         #D4BACB;  /* Old Rose tint — subtle, warm border */
  --color-text:           #0F0915;  /* Coffee Bean — primary text */
  --color-text-muted:     #3F506B;  /* Dusk Blue — secondary text, labels */
  --color-accent:         #C6316F;  /* Hot Berry — buttons, links, speaking ring */
  --color-accent-hover:   #A52860;  /* Hot Berry darkened ~15% */
  --color-secondary:      #B97D98;  /* Old Rose — secondary actions, tags */
  --color-live:           #C6316F;  /* Hot Berry — live badge (brand-consistent) */
  --color-listeners:      #3F506B;  /* Dusk Blue — listener count badge */
  --color-danger:         #A52860;  /* Dark Berry — destructive actions */
  --color-success:        #1a7f4b;  /* Forest Green — confirmatory actions */

  /* Spacing — 4px base scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Type */
  --font-body: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, monospace;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;

  /* Shape */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Avatar sizes */
  --avatar-lg: 72px;
  --avatar-md: 48px;
  --avatar-sm: 36px;

  /* Avatar initials text — always white regardless of theme;
     avatar backgrounds are dark colours verified ≥ 4.5:1 against this value */
  --color-avatar-initials: #ffffff;

  /* Shadows — warm-tinted to match Soft Linen background */
  --shadow-sm: 0 1px 3px rgba(15, 9, 21, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 9, 21, 0.12);

  /* Header height — used for layout calculations */
  --header-height: 56px;
}

/* ── Dark mode ──────────────────────────────────────────────
   Palette roles invert: Coffee Bean becomes background,
   Soft Linen becomes text. Dusk Blue surfaces the midground.
   Hot Berry must lighten to #E05585 to maintain contrast
   against dark backgrounds (4.5:1 AA on Coffee Bean).
   ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #0F0915;  /* Coffee Bean — deep background */
    --color-surface:      #1C1424;  /* Coffee Bean lightened — cards */
    --color-surface-alt:  #2A344A;  /* Dusk Blue darkened — alt surfaces */
    --color-border:       #3F506B;  /* Dusk Blue — border */
    --color-text:         #EAE6DD;  /* Soft Linen — primary text */
    --color-text-muted:   #B97D98;  /* Old Rose — secondary text */
    --color-accent:       #E05585;  /* Hot Berry lightened — 5.2:1 on Coffee Bean ✓ */
    --color-accent-hover: #C6316F;  /* Hot Berry — hover returns to brand value */
    --color-secondary:    #B97D98;  /* Old Rose — unchanged, works on dark */
    --color-live:         #E05585;  /* Lightened Berry for dark */
    --color-listeners:    #5a7499;  /* Dusk Blue lightened — listener badge on dark bg */
    --color-danger:       #E05585;  /* Same as accent in dark — distinct enough in context */
    --color-success:      #34d07a;  /* Green lightened for dark backgrounds */
  }
}

/* Manual override — JS toggles data-theme="dark" on <html> */
[data-theme="dark"] {
  --color-bg:           #0F0915;
  --color-surface:      #1C1424;
  --color-surface-alt:  #2A344A;
  --color-border:       #3F506B;
  --color-text:         #EAE6DD;
  --color-text-muted:   #B97D98;
  --color-accent:       #E05585;
  --color-accent-hover: #C6316F;
  --color-secondary:    #B97D98;
  --color-live:         #E05585;
  --color-listeners:    #5a7499;
  --color-danger:       #E05585;
  --color-success:      #34d07a;
}

[data-theme="light"] {
  --color-bg:           #EAE6DD;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F4E3EC;
  --color-border:       #D4BACB;
  --color-text:         #0F0915;
  --color-text-muted:   #3F506B;
  --color-accent:       #C6316F;
  --color-accent-hover: #A52860;
  --color-secondary:    #B97D98;
  --color-live:         #C6316F;
  --color-listeners:    #3F506B;
  --color-danger:       #A52860;
  --color-success:      #1a7f4b;
}