/* ============================================================
   STREAM STORY — jetons de design
   Sombre par défaut : c'est le monde du stream.
   ============================================================ */
:root{
  /* --- fonds --- */
  --bg:            #0B0B12;
  --bg-2:          #121020;
  --surface:       #191727;
  --surface-2:     #221E36;
  --surface-3:     #2B2645;
  --line:          rgba(255,255,255,.085);
  --line-strong:   rgba(255,255,255,.16);

  /* --- textes --- */
  --txt:           #EDEBF7;
  --txt-2:         #A8A2C6;
  --txt-3:         #8B83B0;

  /* --- accents --- */
  --violet:        #9B6BFF;
  --violet-2:      #7B45F2;
  --violet-soft:   rgba(155,107,255,.14);
  --live:          #FF3B5C;
  --live-soft:     rgba(255,59,92,.14);
  --gold:          #FFC857;
  --gold-2:        #E0A32C;
  --gold-soft:     rgba(255,200,87,.13);
  --good:          #35D8A0;
  --good-soft:     rgba(53,216,160,.14);
  --bad:           #FF6183;
  --bad-soft:      rgba(255,97,131,.13);
  --cyan:          #3ED3E6;
  --cyan-soft:     rgba(62,211,230,.13);

  /* --- typographie --- */
  --f-title: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --f-body:  'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-xs:  .84rem;
  --fs-sm:  .96rem;
  --fs-md:  1.10rem;
  --fs-lg:  1.32rem;
  --fs-xl:  1.85rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.6rem;

  /* --- rythme --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 42px; --sp-8: 60px;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  --sh-1: 0 2px 10px rgba(0,0,0,.35);
  --sh-2: 0 10px 34px rgba(0,0,0,.45);
  --sh-3: 0 22px 60px rgba(0,0,0,.55);
  --sh-glow: 0 0 0 1px rgba(155,107,255,.35), 0 14px 44px rgba(123,69,242,.28);

  --wrap: 1260px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Les tons de carte — une seule source de vérité, utilisée par card.css */
.tone-choice  { --tone: var(--violet); --tone-soft: var(--violet-soft); }
.tone-good    { --tone: var(--good);   --tone-soft: var(--good-soft); }
.tone-great   { --tone: var(--gold);   --tone-soft: var(--gold-soft); }
.tone-bad     { --tone: var(--bad);    --tone-soft: var(--bad-soft); }
.tone-neutral { --tone: var(--txt-3);  --tone-soft: rgba(255,255,255,.05); }
.tone-moment  { --tone: var(--cyan);   --tone-soft: var(--cyan-soft); }
.tone-gold    { --tone: var(--gold);   --tone-soft: var(--gold-soft); }
.tone-live    { --tone: var(--live);   --tone-soft: var(--live-soft); }