/* ==========================================================================
   tokens.css — Design tokens da marca Guslim
   Alterar a identidade visual do site inteiro começa AQUI.
   ========================================================================== */

:root {
  /* --- Cores da marca --- */
  --marca-500: #D90000;   /* vermelho da logo Guslim (CTA, destaques) */
  --marca-400: #FF4A4A;   /* vermelho claro, para texto sobre fundo escuro */
  --marca-600: #B80000;
  --marca-700: #8C0000;
  --sobre-marca: #FFFFFF;  /* texto em cima do vermelho */

  /* --- Neutros (concreto / grafite) --- */
  --grafite-900: #0E1116;
  --grafite-800: #12151A;
  --grafite-700: #1B2029;
  --grafite-600: #2A313D;
  --grafite-500: #48515F;
  --cinza-400: #8A93A3;
  --cinza-300: #C3C8D1;
  --cinza-200: #E4E3DF;
  --cinza-100: #F1EFEB;
  --branco: #FFFFFF;

  /* --- Cores de apoio --- */
  --sucesso: #2E9E6B;
  --alerta: #E0A800;
  --erro: #D8452F;
  --info: #3E7BD4;

  /* --- Papéis semânticos (tema claro) --- */
  --fundo: #F7F6F4;
  --fundo-elevado: var(--branco);
  --fundo-inverso: var(--grafite-800);
  --texto: var(--grafite-800);
  --texto-suave: #5B6472;
  --texto-inverso: var(--branco);
  --borda: #E2E0DB;
  --borda-forte: #CFCCC5;

  /* --- Tipografia --- */
  --fonte-titulo: "Sora", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --t-xs: 0.78rem;
  --t-sm: 0.88rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --t-xl: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --t-2xl: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  --t-3xl: clamp(2.4rem, 1.5rem + 4vw, 4rem);

  /* --- Espaçamento (escala de 4px) --- */
  --e-1: 0.25rem; --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem;     --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;   --e-10: 8rem;

  /* --- Formas e sombras --- */
  --raio-sm: 8px; --raio: 14px; --raio-lg: 22px; --raio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(14, 17, 22, .06), 0 2px 8px rgba(14, 17, 22, .05);
  --sombra-2: 0 8px 24px rgba(14, 17, 22, .10);
  --sombra-3: 0 24px 60px rgba(14, 17, 22, .18);
  --sombra-marca: 0 12px 34px rgba(217, 0, 0, .28);

  /* --- Layout --- */
  --largura-max: 1240px;
  --largura-texto: 68ch;
  --altura-header: 76px;

  /* --- Movimento --- */
  --transicao: 220ms cubic-bezier(.22, .61, .36, 1);
  --transicao-lenta: 600ms cubic-bezier(.22, .61, .36, 1);
}

/* --- Tema escuro (ativado pelo botão do header ou pela preferência do sistema) --- */
:root[data-tema="escuro"] {
  --fundo: var(--grafite-900);
  --fundo-elevado: var(--grafite-700);
  --fundo-inverso: var(--grafite-700);
  --texto: #EEF1F5;
  --texto-suave: #A8B0BD;
  --borda: #262D38;
  --borda-forte: #333C4A;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 10px 28px rgba(0,0,0,.5);
  --sombra-3: 0 26px 64px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: var(--grafite-900);
    --fundo-elevado: var(--grafite-700);
    --fundo-inverso: var(--grafite-700);
    --texto: #EEF1F5;
    --texto-suave: #A8B0BD;
    --borda: #262D38;
    --borda-forte: #333C4A;
  }
}