/* ============================================================
   TOKENS · Tuca Chefe
   Fonte única de cor, tipo, espaço, raio, altura e movimento.
   Duas camadas:
   1. Base: os valores crus da marca (paleta, escalas).
   2. Uso: o papel de cada valor (ação, texto suave, raio de card…).
   Componente nenhum usa valor cru: só tokens de uso.
   ============================================================ */
:root{
  /* ---------- 1. BASE ---------- */

  /* Sunset: o único acento */
  --sunset-300:#FF9D8D;
  --sunset-400:#FF7059;
  --sunset-500:#FF4C36;
  --sunset-600:#E13A26;
  --sunset-700:#A82818;

  /* Tinta: do preto ao cinza claro */
  --ink-0:#000000;
  --ink-1:#08080A;
  --ink-2:#101013;
  --ink-3:#17171B;
  --ink-4:#232327;
  --ink-5:#3A3A40;
  --ink-6:#5A5A61;
  --ink-7:#8C8C94;
  --agua:#D1D3D5;
  --branco:#FFFFFF;
  /* Azul (04/11): só para o que é aberto/gratuito (aula aberta). Não é cor de ação. */
  --azul-300:#A9CBFF;
  --azul-400:#6FA8FF;
  --azul-500:#3D86F5;

  /* Famílias */
  --familia-display:"Bricolage Grotesque", system-ui, sans-serif;
  --familia-texto:"Onest", system-ui, -apple-system, sans-serif;
  --familia-marca:"Poppins", system-ui, sans-serif;

  /* Escala de tipo (px) */
  --tam-11:11px; --tam-12:12px; --tam-13:13px; --tam-14:14px; --tam-15:15px;
  --tam-17:17px; --tam-20:20px; --tam-24:24px; --tam-28:28px; --tam-32:32px; --tam-36:36px; --tam-40:40px; --tam-44:44px; --tam-48:48px; --tam-64:64px;

  /* Espaço: passos de 4 */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:20px; --esp-6:24px;
  --esp-8:32px; --esp-10:40px; --esp-12:48px; --esp-16:64px; --esp-22:88px;

  /* ---------- 2. USO ---------- */

  /* Superfícies */
  --cor-fundo:var(--ink-0);
  --cor-superficie-1:var(--ink-1);   /* card, painel */
  --cor-superficie-2:var(--ink-2);   /* card dentro de card, campo */
  --cor-superficie-3:var(--ink-3);   /* hover de superfície */
  --cor-sobre-foto:rgba(0,0,0,.6);   /* cápsula sobre imagem ou vídeo */
  --cor-aberta:var(--azul-300);                /* aula aberta: só o selo (texto) */
  --cor-aberta-suave:rgba(111,168,255,.16);    /* fundo do selo de aula aberta */
  --cor-aberta-borda:rgba(111,168,255,.42);
  --cor-vidro:rgba(255,255,255,.06);
  --cor-vidro-forte:rgba(255,255,255,.12);
  --desfoque-vidro:blur(12px);

  /* Texto */
  --cor-texto-titulo:var(--branco);
  --cor-texto-corpo:var(--agua);
  --cor-texto-suave:var(--ink-7);
  --cor-texto-sobre-acao:var(--ink-0);

  /* Ação (Sunset) */
  --cor-acao:var(--sunset-500);
  --cor-acao-hover:var(--sunset-600);
  --cor-acao-pressionada:var(--sunset-700);
  --cor-acao-texto:var(--sunset-400);          /* link, ativo, destaque em texto */
  --cor-acao-suave:rgba(255,76,54,.12);        /* fundo de item ativo */
  --cor-acao-borda:rgba(255,76,54,.45);

  /* Bordas */
  --cor-borda-sutil:rgba(209,211,213,.10);
  --cor-borda-media:rgba(209,211,213,.20);
  --cor-borda-forte:rgba(209,211,213,.38);
  --cor-borda-vidro:rgba(255,255,255,.22);

  /* Tipografia por papel */
  --tipo-display:800 var(--tam-44)/1 var(--familia-display);
  --tipo-titulo:800 var(--tam-32)/1.05 var(--familia-display);
  --tipo-titulo-card:600 var(--tam-20)/1.2 var(--familia-texto);   /* 04/11: título de card/painel/lista em Onest; Bricolage só no grande */
  --peso-titulo-p:600;            /* título que não é grande: Onest 600 */
  --sombra:none;                  /* sem sombra projetada: profundidade vem de superfície e borda */
  --tipo-subtitulo:300 clamp(15px, 1.2vw, 17.5px)/1.42 var(--familia-texto);
  --tipo-corpo:400 var(--tam-15)/1.55 var(--familia-texto);
  --tipo-controle:600 var(--tam-14)/1 var(--familia-texto);       /* botão, aba */
  --tipo-controle-p:600 var(--tam-13)/1 var(--familia-texto);
  --tipo-selo:600 var(--tam-12)/1 var(--familia-texto);
  --tipo-meta:500 var(--tam-13)/1.3 var(--familia-texto);          /* minutos, contagem */
  --tipo-meta-p:500 var(--tam-12)/1 var(--familia-texto);

  /* Alturas de controle: botão, botão de ícone, aba */
  --alt-p:32px;
  --alt-m:40px;
  --alt-g:48px;
  --alt-selo:24px;
  --alt-menu-topo:36px;           /* item do menu em cápsula no topo (04/11: 40 era alto, 32 ficou baixo) */
  --alt-menu-gaveta:60px;         /* item do menu aberto (tela cheia) no celular (04/11) */
  --lat-gaveta:min(300px, 84vw);  /* largura da gaveta no celular (site e plataforma) */
  --topo-m:60px;                  /* altura da barra de topo no celular (site e plataforma) */
  --banner-texto:55cqw;           /* largura máxima do cabeçalho sobre o banner das vistas (desktop) */
  --banner-faixa-m:min(58vw, 300px); /* altura da faixa de foto no alto das vistas, no celular */
  --rosto-x:76%;                  /* onde fica o rosto no fundo das vistas (foto e vídeo), da esquerda */
  --fb-alt:280px;                 /* linha do feature bento (desktop); o card principal ocupa 2x2 */
  --fb-alt-m:220px;               /* altura mínima do card do bento no celular */
  --fb-vao:16px;                  /* vão entre os cards do bento */
  --peca-alt:200px;               /* altura mínima da peça do Hot Pack (estilo empty state) */
  --fn-alt:68px;                  /* altura do nó no grafo de fluxos do Hot Pack */
  --tv-linhas:repeating-linear-gradient(180deg, rgba(0,0,0,.42) 0px, rgba(0,0,0,.42) 1px, transparent 1px, transparent 3px); /* linhas de TV sobre vídeo de fundo */
  --tv-veu:radial-gradient(120% 90% at 70% 40%, transparent 40%, rgba(0,0,0,.35) 100%); /* vinheta da TV */
  --tv-filtro:saturate(.75) brightness(.8); /* vídeo de fundo mais apagado */
  /* movimento do menu/topo (04/11) */
  --ease-gaveta:cubic-bezier(.32,.72,0,1); /* curva da cápsula que expande e do menu/topo que some */
  --dur-expande:.42s;             /* a cápsula do menu crescendo até a tela cheia */
  --dur-some:.38s;                /* menu/topo subindo ao rolar e voltando ao puxar */
  --dur-surge:.32s;               /* itens do menu aberto esmaecendo em sequência */
  --dur-entrada:.8s;              /* entrada da plataforma (menu lateral, topo, conteúdo) */
  /* cápsula do menu no celular */
  --menu-topo-m:14px;             /* distância da cápsula ao topo da tela */
  --menu-alt-m:62px;              /* altura da cápsula fechada */
  --menu-fundo-aberto:var(--ink-1, #08080A); /* fundo da cápsula aberta (tela cheia) */
  /* esmaecimento do banner das vistas: curvas com saída lenta, sem borda */
  --banner-mascara-v:linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,.96) 44%, rgba(0,0,0,.86) 54%, rgba(0,0,0,.68) 64%, rgba(0,0,0,.46) 74%, rgba(0,0,0,.26) 84%, rgba(0,0,0,.1) 93%, transparent 100%);
  --banner-mascara-h:linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0,0,0,.05) 38%, rgba(0,0,0,.16) 45%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.56) 59%, rgba(0,0,0,.76) 66%, rgba(0,0,0,.9) 73%, rgba(0,0,0,.97) 80%, #000 88%);
  --banner-mascara-v-m:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.8) 7%, #000 14%, #000 30%, rgba(0,0,0,.95) 40%, rgba(0,0,0,.84) 50%, rgba(0,0,0,.66) 60%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.26) 80%, rgba(0,0,0,.11) 90%, transparent 100%);
  --banner-mascara-h-m:linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.62) 15%, rgba(0,0,0,.78) 30%, rgba(0,0,0,.9) 45%, rgba(0,0,0,.97) 58%, #000 70%);
  --alt-alca:32px;                /* alça de recolher na borda do menu lateral: retângulo em pé (clique 44) */
  --larg-alca:20px;
  --raio-alca:8px;
  --larg-conteudo:1180px;
  --banner-alt:clamp(420px, 62vh, 640px);   /* altura do fundo com a foto do Tuca no topo das vistas (a base some em transparente) */
  --banner-zoom:1;                /* a foto já vem enquadrada (rosto próximo, à direita); 1 = sem zoom */
  --banner-desloca:0px;
  --banner-olho-foto:.38;         /* altura dos olhos na foto (fração da altura) */
  --banner-olho:84px;             /* altura do meio do título (2 linhas): os olhos do Tuca na foto ficam aí; título de 1 linha usa 22px */
  --borda-tela:clamp(16px, 2.6vw, 40px);    /* margem mínima até a borda da área (largura total) */         /* coluna de conteúdo: a mesma da home, em todo o site e na plataforma */
  --medida-leitura:34em;          /* texto corrido: ~70 caracteres por linha na Onest (em, não ch: o "0" da Onest é largo demais); a tela cresce, a linha não */
  --pastas-vao:clamp(24px, 3vw, 48px);   /* vão entre colunas de pastas (cursos, Hot Pack, mentoria) */
  --pastas-uma-coluna:900px;             /* referência: abaixo disso as pastas viram uma coluna (a media query usa 899.98px; não lê variável) */
  --pasta-max:560px;              /* a pasta de vidro ocupa a largura do card (menos 20 px de cada lado) até este teto */
  --splash-marca:72px;            /* a chama da splash screen da plataforma */
  --splash-entra:200ms;           /* a splash cobre a tela */
  --splash-sai:500ms;             /* a splash se desfaz quando a página carregou */
  --splash-min:1200ms;            /* tempo mínimo na tela (04/11: 450 abria rápido demais) */

  /* ---------- FORMULÁRIO E RETORNO (06/11, referência Nuxt UI) ---------- */
  /* Estados: verde só para sucesso, âmbar para aviso, rosa para erro, azul para informação.
     Nenhum deles é cor de ação: a ação continua Sunset. */
  --verde-400:#3DD68C;  --ambar-400:#F5B83D;  --rosa-400:#FF5C7A;
  --cor-sucesso:var(--verde-400);  --cor-sucesso-suave:rgba(61,214,140,.12);  --cor-sucesso-borda:rgba(61,214,140,.40);
  --cor-aviso:var(--ambar-400);    --cor-aviso-suave:rgba(245,184,61,.12);    --cor-aviso-borda:rgba(245,184,61,.40);
  --cor-erro:var(--rosa-400);      --cor-erro-suave:rgba(255,92,122,.12);     --cor-erro-borda:rgba(255,92,122,.50);
  --cor-info:var(--azul-400);      --cor-info-suave:rgba(111,168,255,.12);    --cor-info-borda:rgba(111,168,255,.40);
  /* Campo (Input, Textarea, Select, InputNumber, PinInput…) */
  --campo-fundo:var(--ink-2);
  --campo-fundo-hover:var(--ink-3);
  --campo-borda:var(--cor-borda-media);
  --campo-borda-hover:var(--cor-borda-forte);
  --campo-borda-foco:var(--cor-acao);
  --campo-anel:0 0 0 3px var(--cor-acao-suave);
  --campo-raio:12px;              /* campo é contêiner pequeno: 12 (botão continua cápsula) */
  --campo-pad:var(--esp-4);
  --campo-texto:400 var(--tam-15)/1.4 var(--familia-texto);
  --campo-placeholder:var(--ink-6);
  --rotulo:600 var(--tam-13)/1.2 var(--familia-texto);   /* rótulo do campo */
  --ajuda:400 var(--tam-12)/1.4 var(--familia-texto);    /* ajuda e erro embaixo do campo */
  /* Marcadores (Checkbox, Radio, Switch, Slider) */
  --marca-tam:18px;               /* caixa do checkbox e do radio */
  --marca-raio:5px;
  --chave-larg:40px; --chave-alt:24px;   /* switch */
  --faixa-alt:4px; --faixa-pino:18px;    /* slider */
  /* Sobreposição (Modal, Drawer, Slideover, Popover, Menu, Toast, Tooltip) */
  --veu:rgba(0,0,0,.66);
  --veu-desfoque:4px;          /* véu do modal, do painel e da paleta */
  --veu-desfoque-forte:18px;   /* modal que pede foco total (Entrar, 09/11) */
  --veu-forte:rgba(0,0,0,.72);
  --sobre-fundo:var(--ink-2);
  --sobre-borda:var(--cor-borda-media);
  --sobre-raio:var(--raio-card);
  --modal-larg:min(520px, calc(100vw - 32px));
  --lateral-larg:min(420px, 92vw);
  --menu-larg:224px;
  --toast-larg:min(360px, calc(100vw - 32px));
  --toast-tempo:5000ms;
  --camada-menu:50; --camada-modal:80; --camada-toast:160; --camada-dica:170;   /* 08/11: acima do agente flutuante (150) */

  /* Raios: pequeno é cápsula, contêiner é 16 ou 24 */
  --raio-capsula:999px;   /* botão, aba, selo, minutos */
  --raio-menu:10px;       /* item do menu lateral */
  --raio-card:16px;
  --raio-painel:24px;

  /* Ícone */
  --icone-p:14px;
  --icone-m:16px;
  --icone-g:20px;
  --icone-traco:1.6;

  /* Foco e brilho (sem sombra projetada) */
  --anel-foco:0 0 0 2px var(--ink-0), 0 0 0 4px var(--sunset-500);
  --brilho-acao:0 0 40px rgba(255,76,54,.30);

  /* Movimento */
  --dur-instantanea:90ms;
  --dur-rapida:180ms;
  --dur-media:280ms;
  --dur-lenta:520ms;
  --curva-padrao:cubic-bezier(.2,.7,.3,1);
  --curva-saida:cubic-bezier(.16,1,.3,1);

  /* ---- vindos das páginas (06/11): eram cópias iguais em cada :root ---- */
  --textura-grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");   /* grão de filme (feTurbulence), por cima das fotos e fundos */
  --cor-fundo-claro:#F3EFEA;   /* faixa clara da landing (FAQ) */
  --cor-superficie-clara:#FBF9F6;   /* cartão sobre a faixa clara */
  /* lado claro (09/11): o plano e o resumo, à direita, depois da escolha do curso */
  --cor-borda-sutil-clara:rgba(0,0,0,.08);
  --cor-borda-media-clara:rgba(0,0,0,.16);
  --cor-borda-forte-clara:rgba(0,0,0,.32);
  --cor-fundo-cinza:#E6E7E9;   /* fundo do recibo, à direita do modal (09/11) */
  --curva-suave:cubic-bezier(.4,0,.2,1);   /* entra e sai suave (material) */
  --curva-rolo:cubic-bezier(.76,0,.24,1);   /* o rolo do menu da landing */
  --gradiente-brasa:linear-gradient(135deg, var(--sunset-400) 0%, var(--sunset-500) 46%, var(--brasa-500) 100%);   /* Sunset 400 → 500 → brasa */
  --gradiente-fio:linear-gradient(90deg, transparent 0%, rgba(255,76,54,.9) 50%, transparent 100%);   /* fio de luz Sunset */
  --gradiente-fumaca:radial-gradient(60% 60% at 50% 0%, rgba(255,76,54,.28) 0%, transparent 70%);   /* fumaça Sunset no topo */
  --gradiente-protecao:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 78%,var(--ink-0) 100%);   /* véu preto que protege texto no pé da foto */
  --borda-landing:clamp(20px, 5vw, 64px);   /* margem lateral da landing (Home, Mentoria, Operação) */
  --borda-plataforma:clamp(16px, 2.4vw, 32px);   /* margem lateral da plataforma */
  --raio-chapa:40px;   /* a chapa: folha de canto redondo que entra por cima (rodapé, seções sheet) */
  --raio-pp:4px; --raio-p:8px; --raio-m:12px;   /* raios gerais pequenos: detalhe, chip e caixa (06/11) */

  /* ---- fogo e brasa (06/11): os tons quentes da arte (halo, capas, chama), antes soltos ---- */
  --brasa-950:#0E0503; --brasa-800:#4A2A22; --brasa-700:#5C1409; --brasa-600:#7A1D10; --brasa-500:#C42B1A;
  --ink-8:#B0B3B8;   /* cinza claro, entre o ink-7 e o água */
  --fogo-chama:#FF6A2A; --fogo-laranja:#FF8A4C; --fogo-ambar:#FFA33F;
  /* ---- escala de exibição: números e títulos gigantes, um por lugar ---- */
  --tam-56:56px; --tam-72:72px; --tam-80:80px; --tam-88:88px; --tam-96:96px; --tam-104:104px; --tam-128:128px; --tam-200:200px;
  --tam-campo:16px;   /* campo de digitação: menos que 16 o iPhone dá zoom */
  --raio-fio:2px;     /* traço, barra fina */
  --familia-codigo:ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* só bloco de código da biblioteca */
}