/* CrowdMix — design tokens (dérivés du CDC : or, sombre, vert) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* surfaces — warm near-black */
  --bg:        #0E0E10;
  --surface:   #161618;
  --surface-2: #1D1D20;
  --surface-3: #26262A;
  --line:      #2E2E33;
  --line-soft: #232327;

  /* brand */
  --gold:      #C8973A;
  --gold-hi:   #E0B45A;
  --gold-dim:  #8A6B2E;
  --gold-wash: rgba(200,151,58,0.12);

  /* status */
  --green:     #1DB954;
  --green-dim: #0E5C2A;
  --green-wash:rgba(29,185,84,0.13);
  --red:       #E4564A;
  --red-wash:  rgba(228,86,74,0.13);
  --orange:    #E68A2E;
  --orange-wash:rgba(230,138,46,0.13);

  /* text */
  --text:      #F4F1EA;
  --text-2:    #B5B2AC;
  --text-3:    #807D78;
  --text-4:    #545250;

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

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

*{box-sizing:border-box;}
.cm-reset{margin:0;padding:0;}

/* shared atoms reused across surfaces */
.cm-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.cm-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-family:var(--font-ui);font-weight:600;}

.cm-tag-accept{background:var(--green-wash);color:#5BE08B;}
.cm-tag-refuse{background:var(--red-wash);color:#FF8B80;}
.cm-tag-temp{background:var(--orange-wash);color:#F4B868;}

/* score ring helper */
.cm-cover{background:linear-gradient(135deg,#2A2A30,#17171A);position:relative;overflow:hidden;}
.cm-cover::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 30% 25%, rgba(200,151,58,0.22), transparent 55%),
  radial-gradient(circle at 75% 80%, rgba(29,185,84,0.16), transparent 50%);}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ── animations partagées ── */
@keyframes cmSpin   { to { transform:rotate(360deg); } }
@keyframes cmFade   { from { opacity:0; } to { opacity:1; } }
@keyframes cmPulse  { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@keyframes cmUp     { from { transform:translateY(24px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes cmPop    { 0% { transform:scale(.88); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes cmTick   { 0% { transform:scale(1.22); } 100% { transform:scale(1); } }
@keyframes cmBlink  { 0%,49%{opacity:1;} 50%,100%{opacity:0.15;} }
@keyframes cmArrowPulse { 0%,60%,100%{transform:scale(1);opacity:1;} 72%{transform:scale(1.35);opacity:.75;} 86%{transform:scale(1.15);opacity:.9;} }
/* Gagnant : anneau or constant + glow respirant + anneau circulaire qui irradie (3e couche
   box-shadow : spread 0→22px, opacité .6→0 → onde qui se propage puis se reset invisible). */
@keyframes cmWinGlow{
  0%   { box-shadow:0 0 0 2px var(--gold), 0 0 42px -6px rgba(224,180,90,.55), 0 0 0 0 rgba(224,180,90,.6); }
  55%  { box-shadow:0 0 0 2px var(--gold), 0 0 92px 6px rgba(224,180,90,1),    0 0 0 22px rgba(224,180,90,0); }
  100% { box-shadow:0 0 0 2px var(--gold), 0 0 42px -6px rgba(224,180,90,.55), 0 0 0 22px rgba(224,180,90,0); }
}

/* ── animations écran teasing (display) ── */
@keyframes cmDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(48px,-38px)}}
@keyframes cmDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-54px,44px)}}
@keyframes cmDrift3{0%,100%{transform:translate(0,0)}33%{transform:translate(36px,54px)}66%{transform:translate(-28px,20px)}}
@keyframes cmFloat1{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-26px) rotate(2.5deg)}}
@keyframes cmFloat2{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-34px) rotate(-2deg)}}
@keyframes cmFloat3{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-18px) rotate(1deg)}}
@keyframes cmGlow{0%,100%{text-shadow:0 0 28px rgba(200,151,58,.95),0 0 80px rgba(200,151,58,.30)}50%{text-shadow:0 0 36px rgba(200,151,58,1),0 0 100px rgba(200,151,58,.50)}}
@keyframes cmNoteFloat{0%{transform:translateY(0) rotate(-8deg);opacity:0}10%{opacity:1}80%{opacity:.6}100%{transform:translateY(-380px) rotate(18deg);opacity:0}}
/* Barres EQ teasing : scaleY pur (compositor only) — durée/délai randomisés inline par barre */
@keyframes cmEqBar{from{transform:scaleY(.12)}to{transform:scaleY(1)}}