/* Gerado por site/scripts/tokens.mjs a partir de extension/styles.css. Não edite à mão. */
:root {
  --fundo:             #141214;
  --superficie:        #1D1A1D;
  --superficie-2:      #262226;
  --palco:             #0F0D0F;
  --borda:             #36302F;
  --borda-forte:       #4A4340;
  --campo:             #262226;
  --campo-borda:       #36302F;
  --texto:             #F5F2EF;
  --texto-2:           #CDC6C0;
  --texto-3:           #A39C95;
  --acao:              #D42A47;
  /* #C42340 e não #E04260: o branco sobre #E04260 dava 4,10:1 (decisão do dono, 05/10/2026). */
  --acao-hover:        #C42340;
  --sobre-acao:        #FFFFFF;
  --traco:             #F0566E;
  --selecionado:       #3A1620;
  --selecionado-texto: #F5C2CB;
  --segmento-ativo:    #F5F2EF;
  --sobre-segmento:    #141214;
  --atencao:           #F2B33D;
  --atencao-fundo:     #3A2C0E;
  --atencao-texto:     #FFD27A;
  --ganho:             #4FCB8F;
  --ganho-fundo:       #123324;
  --status:            #C9A23A;
  --sobre-status:      #161416;
  --erro-texto:        #FF8FA3;
  --erro-fundo:        #3A1520;
  --ponto:             #262226;
  --sobreposicao:      rgba(0, 0, 0, 0.6);
  --barra-topo:        rgba(20, 18, 20, 0.88);
  --sombra-1: 0 0 0 1px var(--borda);
  --sombra-2: 0 0 0 1px var(--borda);
  --sombra-3: 0 30px 80px rgba(0, 0, 0, 0.6);
  /* A moldura do celular no palco: ébano nos dois temas (o slide em volta é sempre o mesmo). */
  --celular: #161416;
  /* A tela do celular da lousa (07/10/2026): sempre escura, como um feed no modo escuro, nos dois temas. */
  --celular-tela:    #050405;
  --celular-texto:   #F4F1EE;
  --celular-texto-2: #9C969A;
  --celular-linha:   #2A262A;
  --celular-ilha:    #000000;
  --celular-botao:   #2B282B;
  /* O anel do foco nos campos (a borda vira --traco e ganha este anel): --traco a 28%. */
  --anel: rgba(240, 86, 110, 0.28);
  /* O véu de --superficie sobre o slide (o "gerando"). Em rgba, e não color-mix(): o
     html2canvas da exportação não entende color-mix() e para (medido em 05/10/2026). */
  --veu: rgba(29, 26, 29, 0.88);
  /* O ícone do botão de tema: o sol no escuro (vai para o claro), a lua no claro. */
  --tema-sol: block;
  --tema-lua: none;
  color-scheme: dark;

  /* ── Tipografia: só Archivo na interface ── */
  --fonte: 'Archivo Interface', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Espaçamento (px) ── */
  --esp-2: 2px;   --esp-4: 4px;   --esp-6: 6px;   --esp-8: 8px;   --esp-10: 10px;
  --esp-12: 12px; --esp-14: 14px; --esp-16: 16px; --esp-18: 18px; --esp-20: 20px;
  --esp-22: 22px; --esp-24: 24px; --esp-28: 28px; --esp-32: 32px;

  /* ── Raios ── */
  --raio-tag: 4px;       /* tags */
  --raio-selo: 5px;      /* selos e amostras de cor */
  --raio-atalho: 6px;    /* atalhos e miniaturas */
  --raio-cartao: 8px;    /* cartões de template */
  --raio-campo: 10px;    /* campos e opções */
  --raio-botao: 12px;    /* botões, listas e avisos */
  --raio-destaque: 14px; /* cartões de destaque */
  --raio-janela: 20px;   /* janelas */
  --raio-soltar: 22px;   /* área de soltar print */

  /* ── Movimento ── */
  --rapido: 120ms;
  --medio: 200ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  --slide-bg:       #12120f;
  --slide-surface:  #1a1a16;
  --slide-accent:   #e8c97e;
  --slide-title:    #f0ede4;
  --slide-body:     #8a8880;
  --slide-font-title: 'Playfair Display', serif;
  --slide-font-body:  'DM Sans', sans-serif;
  /* A mono do slide (pílula, marca d'água, número): fica DM Mono, seja qual for a fonte da interface. */
  --slide-mono: 'DM Mono', monospace;
  /* A pílula de tipo do slide: as cores do slide não mudam com o tema da interface. */
  --slide-magenta:  #ff6ec7;
  --slide-accent-2: #7dd3fc;

  --slide-w: 1080px;
  --slide-h: 1350px;
  /* O slide no palco: a tela da moldura de celular (292 px − 2 × 9 px = 274 px de 1080). */
  --preview-scale: 0.2537;
  --preview-w: calc(var(--slide-w) * var(--preview-scale));
  --preview-h: calc(var(--slide-h) * var(--preview-scale));
}

/* ── O tema claro: Porcelana ──
   Segue o sistema (prefers-color-scheme); o botão da barra de cima escolhe e lembra
   (data-tema em <html>, por tema.js). Os dois blocos têm os mesmos valores. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --fundo:             #F6F5F3;
    --superficie:        #FFFFFF;
    --superficie-2:      #FFFFFF;
    --palco:             #EFEDEA;
    --borda:             #E4E1DC;
    --borda-forte:       #CFCAC3;
    --campo:             #F2F0ED;
    --campo-borda:       #E4E1DC;
    --texto:             #161416;
    --texto-2:           #57524E;
    --texto-3:           #6E6863;
    --acao:              #B4122E;
    --acao-hover:        #9C0F27;
    --sobre-acao:        #FFFFFF;
    --traco:             #B4122E;
    --selecionado:       #FBEAED;
    --selecionado-texto: #7A0C1F;
    --segmento-ativo:    #161416;
    --sobre-segmento:    #FFFFFF;
    --atencao:           #F2B33D;
    --atencao-fundo:     #FFF3D6;
    --atencao-texto:     #8A5A00;
    --ganho:             #0E7A4E;
    --ganho-fundo:       #E3F3EB;
    --status:            #C9A23A;
    --sobre-status:      #161416;
    --erro-texto:        #9E1028;
    --erro-fundo:        #FCE8EB;
    --ponto:             #E1DED9;
    --sobreposicao:      rgba(22, 20, 22, 0.42);
    --barra-topo:        rgba(246, 245, 243, 0.9);
    --anel: rgba(180, 18, 46, 0.28);
    --veu: rgba(255, 255, 255, 0.88);
    --sombra-1: 0 8px 24px rgba(22, 20, 22, 0.08);
    --sombra-2: 0 18px 40px rgba(22, 20, 22, 0.16);
    --sombra-3: 0 30px 80px rgba(0, 0, 0, 0.30);
    --tema-sol: none;
    --tema-lua: block;
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --fundo:             #F6F5F3;
  --superficie:        #FFFFFF;
  --superficie-2:      #FFFFFF;
  --palco:             #EFEDEA;
  --borda:             #E4E1DC;
  --borda-forte:       #CFCAC3;
  --campo:             #F2F0ED;
  --campo-borda:       #E4E1DC;
  --texto:             #161416;
  --texto-2:           #57524E;
  --texto-3:           #6E6863;
  --acao:              #B4122E;
  --acao-hover:        #9C0F27;
  --sobre-acao:        #FFFFFF;
  --traco:             #B4122E;
  --selecionado:       #FBEAED;
  --selecionado-texto: #7A0C1F;
  --segmento-ativo:    #161416;
  --sobre-segmento:    #FFFFFF;
  --atencao:           #F2B33D;
  --atencao-fundo:     #FFF3D6;
  --atencao-texto:     #8A5A00;
  --ganho:             #0E7A4E;
  --ganho-fundo:       #E3F3EB;
  --status:            #C9A23A;
  --sobre-status:      #161416;
  --erro-texto:        #9E1028;
  --erro-fundo:        #FCE8EB;
  --ponto:             #E1DED9;
  --sobreposicao:      rgba(22, 20, 22, 0.42);
  --barra-topo:        rgba(246, 245, 243, 0.9);
  --anel: rgba(180, 18, 46, 0.28);
  --veu: rgba(255, 255, 255, 0.88);
  --sombra-1: 0 8px 24px rgba(22, 20, 22, 0.08);
  --sombra-2: 0 18px 40px rgba(22, 20, 22, 0.16);
  --sombra-3: 0 30px 80px rgba(0, 0, 0, 0.30);
  --tema-sol: none;
  --tema-lua: block;
  color-scheme: light;
}