/* Caminho: assets/css/tokens.css
   Fucinhos e Bigodes, FUBI. Ponto único de verdade do design.
   Paleta extraída pixel a pixel do logotipo oficial. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff') format('woff');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito-sans-var.woff') format('woff');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* Cores da marca */
  --cor-cafe-900: #2A1608;
  --cor-cafe-800: #3E2412;
  --cor-cafe-700: #54311C;
  --cor-cafe-600: #6B4226;
  --cor-caramelo-600: #C06000;
  --cor-caramelo-500: #D89030;
  --cor-caramelo-400: #F0A848;
  --cor-pessego-300: #F0C090;
  --cor-pessego-200: #F7DCBA;
  --cor-creme-100: #FBEFDD;
  --cor-creme-50: #FFF7EC;
  --cor-rosa-300: #E89DA4;
  --cor-rosa-200: #F2C4C4;
  --cor-branco-quente: #FFFDF9;
  --cor-verde-ok: #4A7C59;
  --cor-vermelho-alerta: #B3402A;

  /* Papéis semânticos (tema claro) */
  --fundo: var(--cor-creme-50);
  --fundo-alto: var(--cor-branco-quente);
  --fundo-suave: var(--cor-creme-100);
  --texto: var(--cor-cafe-800);
  --texto-suave: #6B4F38;
  --acao: var(--cor-caramelo-600);
  --acao-hover: #A85400;
  --acao-contraste: #FFFFFF;
  --destaque: var(--cor-caramelo-500);
  --linha: #EADBC4;
  --vidro: rgba(255, 253, 249, 0.72);
  --vidro-borda: rgba(216, 144, 48, 0.25);
  --sombra-cor: rgba(107, 66, 38, 0.18);
  --brilho: rgba(240, 168, 72, 0.35);

  /* Tipografia */
  --fonte-titulo: 'Fraunces', Georgia, serif;
  --fonte-corpo: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --texto-xs: 0.8rem;
  --texto-sm: 0.95rem;
  --texto-base: 1.0625rem;
  --texto-md: 1.25rem;
  --texto-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --texto-xl: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  --texto-hero: clamp(2.4rem, 1.6rem + 4.4vw, 4.6rem);

  /* Espaçamento e forma */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;
  --esp-secao: clamp(4rem, 3rem + 6vw, 8rem);
  --raio-sm: 10px;
  --raio-md: 18px;
  --raio-lg: 28px;
  --raio-pill: 999px;
  --largura-max: 1200px;

  /* Tokens de motion */
  --motion-instante: 100ms;
  --motion-rapido: 200ms;
  --motion-padrao: 350ms;
  --motion-expressivo: 750ms;
  --motion-cinema: 1200ms;
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-entrada: cubic-bezier(0.55, 0, 0.85, 0.3);
  --ease-mola: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);

  color-scheme: light;
}

/* Tema escuro: café profundo com brasas de caramelo */
:root[data-tema="escuro"] {
  --fundo: #1B0F06;
  --fundo-alto: #241509;
  --fundo-suave: #2E1C0D;
  --texto: #F7E8D4;
  --texto-suave: #CBAA87;
  --acao: var(--cor-caramelo-400);
  --acao-hover: #F7BE6E;
  --acao-contraste: #2A1608;
  --destaque: var(--cor-caramelo-400);
  --linha: #3E2A17;
  --vidro: rgba(36, 21, 9, 0.66);
  --vidro-borda: rgba(240, 168, 72, 0.22);
  --sombra-cor: rgba(0, 0, 0, 0.45);
  --brilho: rgba(240, 168, 72, 0.18);
  color-scheme: dark;
}