/* ==========================================================================
   CLUBE DO KF — DESIGN TOKENS  ·  "Groove" design system v2.0
   Alinhado ao ABZA Design Code v2 (branding book v2.1 do Kleytton Farney):
   preto de palco quente, gradiente laranja → coral → magenta, Bricolage + Instrument,
   movimento no tempo da música (--bpm).
   ========================================================================== */

:root {
  /* ---- Cor · Superfícies (escala "Palco", preto quente do ABZA) ---- */
  --bg:          #0F0C0E;   /* preto-palco · 70% da tela */
  --bg-1:        #141013;   /* camada 1 */
  --bg-2:        #1A1518;   /* superfície · cards e nav (18%) */
  --bg-3:        #221B1F;   /* elevada · inputs, hover */
  --glass:       rgba(247, 242, 244, .045);
  --glass-2:     rgba(247, 242, 244, .08);
  --glass-3:     rgba(247, 242, 244, .14);
  --vidro:       rgba(15, 12, 14, .62);   /* vidro fosco (nav, barras) */
  --brilho:      rgba(247, 242, 244, .06);/* luz de topo dos painéis */
  --line:        rgba(247, 242, 244, .08);/* ≈ fio #332A30 */
  --line-2:      rgba(247, 242, 244, .15);/* ≈ fio-2 #453A41 */
  --line-3:      rgba(247, 242, 244, .28);

  /* ---- Cor · Texto ---- */
  --text:        #F7F2F4;   /* giz */
  --text-2:      #CFC5CA;
  --muted:       #A3989D;   /* apoio */
  --dim:         #776B71;   /* mudo */

  /* ---- Cor · Marca ABZA ("Luz de palco") ---- */
  --laranja:     #E96930;   /* rótulos, ofensiva */
  --coral:       #E54248;
  --magenta:     #E0165D;   /* marca e estados ativos */
  --magenta-profundo: #C70E50; /* CTA (branco em cima: 5,8:1) */
  --magenta-press: #A80B42;
  --acao-borda:  #7D0832;   /* base do botão 3D */
  --rosa:        #FF6E9C;   /* texto de destaque (marca-txt) */
  --verde-vu:    #3FE081;   /* "só o acerto" */
  --violet:      #9B6BFF;
  /* aliases usados pelos componentes */
  --amber:       var(--laranja);
  --ember:       var(--coral);
  --acao:        var(--magenta-profundo);
  --accent:      var(--magenta);
  --accent-2:    var(--laranja);
  --on-accent:   #FFFFFF;
  --grad:        linear-gradient(120deg, #E96930 0%, #E54248 48%, #E0165D 100%);
  --grad-v:      linear-gradient(180deg, #E96930 0%, #E54248 48%, #E0165D 100%);
  --grad-h:      linear-gradient(90deg, #E96930, #E54248 50%, #E0165D);
  --grad-soft:   linear-gradient(120deg, rgba(233,105,48,.16), rgba(224,22,93,.16));
  --grad-ring:   conic-gradient(from 210deg, #E96930, #E54248, #E0165D, #FF6E9C, #E96930);
  --accent-glow: 0 12px 40px -14px rgba(224, 22, 93, .7);
  --luz-cenario: transparent;

  /* ---- Cor · Semântica ---- */
  --ok:          var(--verde-vu);
  --warn:        #FFC93C;
  --err:         #E54248;
  --err-txt:     #FF8A80;
  --info:        #64D2FF;
  --live:        var(--magenta);
  --gold:        #F7C948;
  --silver:      #C9D1DC;
  --bronze:      #D48A52;

  /* ---- Tipografia (ABZA: Bricolage Grotesque + Instrument Sans) ---- */
  --font:        "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:"Bricolage Grotesque", "Arial Narrow", sans-serif;
  --font-serif:  "Instrument Serif", "Times New Roman", serif;
  --fs-xs:   12px;
  --fs-sm:   13.5px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   clamp(20px, 1.8vw, 24px);
  --fs-xl:   clamp(28px, 3vw, 40px);
  --fs-2xl:  clamp(36px, 5vw, 64px);
  --fs-hero: clamp(72px, 12vw, 180px);

  /* ---- Espaço (base 4) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 72px;
  --tab-h: 64px;

  /* ---- Raio (ABZA: raio 18 · raio-s 12 · botões 16) ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-btn: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Sombra / elevação (fios internos, nunca bordas) ---- */
  --sombra: 0 24px 60px -24px rgba(0,0,0,.8);
  --e-1: inset 0 1px 0 var(--brilho), 0 8px 24px -12px rgba(0,0,0,.6);
  --e-2: inset 0 1px 0 var(--brilho), 0 0 0 1px var(--line), var(--sombra);
  --e-3: 0 0 0 1px var(--line-2), 0 40px 100px -20px rgba(0,0,0,.95);

  /* ---- Movimento no tempo (ABZA: tudo é medido em batidas) ---- */
  --bpm:       92;
  --tempo:     calc(60s / var(--bpm));   /* ≈ 652ms · uma batida */
  --colcheia:  calc(var(--tempo) / 2);   /* ≈ 326ms */
  --semi:      calc(var(--tempo) / 4);   /* ≈ 163ms */
  --env-ataque:  cubic-bezier(.2, .9, .25, 1);   /* entradas */
  --env-pluck:   cubic-bezier(.34, 1.56, .64, 1);/* acerto, um quique */
  --env-release: cubic-bezier(.5, 0, .75, 0);    /* saídas */
  --ease:      var(--env-ataque);
  --ease-out:  var(--env-ataque);
  --spring:    var(--env-pluck);
  --t-fast: var(--semi);
  --t:      var(--colcheia);
  --t-slow: var(--tempo);

  /* ---- Camadas ---- */
  --z-nav: 50; --z-preview: 60; --z-modal: 80; --z-toast: 100;

  /* ---- Textura de grão (cinema) ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

@media (max-width: 720px) {
  :root { --nav-h: 60px; --fs-base: 15px; }
}

/* ---- Cenários (ABZA): cada área re-tinge o fundo e troca a cor de ação.
        O gradiente e o Verde VU nunca mudam. ---- */
body[data-cenario="teoria"]    { --bg: #120D0B; --bg-1: #17110E; --acao: #E96930; --acao-borda: #8A3A14; --accent: #E96930; --luz-cenario: rgba(233,105,48,.16); }
body[data-cenario="pratica"]   { --bg: #120B0C; --bg-1: #170F10; --acao: #E54248; --acao-borda: #87222A; --accent: #E54248; --luz-cenario: rgba(229,66,72,.16); }
body[data-cenario="percepcao"] { --bg: #0C0A14; --bg-1: #110E1B; --acao: #7C4DFF; --acao-borda: #3F2499; --accent: #9B6BFF; --luz-cenario: rgba(124,77,255,.18); }
body[data-cenario="palco"]     { --bg: #120A0F; --bg-1: #170E14; --acao: #C70E50; --acao-borda: #7D0832; --accent: #E0165D; --luz-cenario: rgba(224,22,93,.17); }
body[data-cenario="estudio"]   { --bg: #0A0E13; --bg-1: #0E131A; --acao: #2F8FE0; --acao-borda: #174A78; --accent: #3BA7FF; --luz-cenario: rgba(47,143,224,.16); }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t: 0s; --t-slow: 0s; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;
  font-feature-settings: "ss01", "cv11";
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg, video, canvas { display: block; max-width: 100%; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
::selection { background: var(--ember); color: #000; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 10px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 10px; border: 3px solid var(--bg); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 16px; }

/* ---- Utilitários tipográficos ---- */
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.display { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-stretch: 80%; letter-spacing: -.022em; line-height: .88; font-optical-sizing: auto; }
.grad-text { background: var(--grad-v); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-txt { color: var(--rosa); }
/* Etiqueta com LED (ABZA "legenda"): pisca no tempo */
.led { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--laranja); }
.led::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: led var(--tempo) steps(1) infinite; }
@keyframes led { 50% { opacity: .25; } }
@keyframes batida { 0% { transform: scale(1.06); } 35%, 100% { transform: scale(1); } }
@keyframes balanca { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.balanca { animation: balanca .32s var(--env-release); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.tnum { font-variant-numeric: tabular-nums; }
.ok { color: var(--ok); } .err { color: var(--err); } .warn { color: var(--warn); }