/* ═══════════════════════════════════════════════════════════════════
   Tokens — a única fonte de cor, espaço, tipo e movimento.
   Nenhum valor bruto (#hex, 14px) fora deste arquivo.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── cor: superfícies ─────────────────────────────────────────── */
  --fundo:        #080A0F;   /* o mais fundo de tudo */
  --superficie:   #0F131C;   /* cards, painéis */
  --superficie-2: #161B27;   /* elevação: hover, campos, colunas do kanban */
  --superficie-3: #1E2533;   /* elevação máxima: menus, modais */
  --linha:        #232B3A;   /* borda padrão */
  --linha-forte:  #34405480;

  /* ── cor: texto ───────────────────────────────────────────────── */
  --txt:        #EEF1F6;
  --txt-2:      #9AA5B8;   /* secundário, rótulos */
  --txt-3:      #626D80;   /* terciário, metadado */

  /* ── cor: marca e semântica ───────────────────────────────────── */
  --acento:      #FF5C38;  /* laranja Cara do Vídeo — ação, foco, marca */
  --acento-2:    #FF8A5C;
  --acento-fraco:#FF5C3818;
  --ok:          #12B886;
  --ok-fraco:    #12B88618;
  --aviso:       #FFB020;
  --aviso-fraco: #FFB02018;
  --erro:        #F0475E;
  --erro-fraco:  #F0475E18;
  --info:        #4C8DF5;
  --info-fraco:  #4C8DF518;
  --roxo:        #9775FA;

  /* Gradiente de destaque. Usado com moderação: topo do painel e meta batida. */
  --brilho: linear-gradient(135deg, var(--acento) 0%, #FF3D9A 55%, var(--roxo) 100%);
  --brilho-ok: linear-gradient(135deg, var(--ok) 0%, #38D9A9 100%);

  /* ── tipografia ───────────────────────────────────────────────── */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-num: "SF Mono", "JetBrains Mono", ui-monospace, "Menlo", monospace;

  --t-xs:   11px;
  --t-sm:   12.5px;
  --t-base: 14px;
  --t-md:   16px;
  --t-lg:   20px;
  --t-xl:   26px;
  --t-2xl:  34px;
  --t-3xl:  46px;
  --t-4xl:  60px;

  /* ── espaço ───────────────────────────────────────────────────── */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 20px;  --e-6: 24px;  --e-8: 32px;  --e-10: 40px;
  --e-12: 48px; --e-16: 64px;

  /* ── forma ────────────────────────────────────────────────────── */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;

  /* ── sombra ───────────────────────────────────────────────────── */
  --sombra-1: 0 1px 2px #00000040;
  --sombra-2: 0 4px 16px #00000055;
  --sombra-3: 0 16px 48px #00000070;
  --foco: 0 0 0 3px #FF5C3855;

  /* ── movimento ────────────────────────────────────────────────── */
  --rapido: 120ms cubic-bezier(.2,.8,.2,1);
  --medio:  220ms cubic-bezier(.2,.8,.2,1);
  --lento:  480ms cubic-bezier(.2,.8,.2,1);

  /* ── layout ───────────────────────────────────────────────────── */
  --lateral: 232px;
  --topo: 60px;
  --max: 1560px;
}

/* Tema claro. Mesmos nomes, valores trocados — nenhum componente sabe que existe. */
:root[data-tema="claro"] {
  --fundo:        #F4F6FA;
  --superficie:   #FFFFFF;
  --superficie-2: #F0F3F8;
  --superficie-3: #FFFFFF;
  --linha:        #DFE4EC;
  --linha-forte:  #C6CEDB;
  --txt:          #0F131C;
  --txt-2:        #56617A;
  --txt-3:        #8B95A8;
  --acento-fraco: #FF5C3814;
  --ok-fraco:     #12B88614;
  --aviso-fraco:  #B4780014;
  --erro-fraco:   #F0475E14;
  --info-fraco:   #4C8DF514;
  --aviso:        #B47800;
  --sombra-1: 0 1px 2px #0F131C10;
  --sombra-2: 0 4px 16px #0F131C14;
  --sombra-3: 0 16px 48px #0F131C1F;
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0ms; --medio: 0ms; --lento: 0ms; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}