/* ==========================================================================
   Esgomil Design System — Tokens
   Fonte única de cores, tipografia, espaço, forma e movimento.
   Altere aqui; componentes e páginas só consomem variáveis.
   ========================================================================== */

:root {
  /* ---- Cores da marca ---------------------------------------------------- */
  --color-preto: #111111;          /* primária: logo, títulos, textos */
  --color-amarelo: #F5B800;        /* secundária: destaques, CTAs, frota */
  --color-concreto: #F2F2EE;       /* fundo padrão */
  --color-grafite: #3B3B38;        /* apoio: textos secundários, linhas */
  --color-branco: #FFFFFF;

  /* ---- Variações derivadas ------------------------------------------------- */
  --color-amarelo-escuro: #C98F00; /* hover de amarelo, foco em fundo claro */
  --color-amarelo-claro: #FFE27A;  /* brilhos e realces */
  --color-preto-elevado: #1D1D1B;  /* superfícies sobre preto */
  --color-linha: #DADAD3;          /* bordas em fundo claro */
  --color-linha-escura: #2F2F2B;   /* bordas em fundo preto */
  --color-texto-suave: #62625B;    /* legendas e apoio em fundo claro */
  --color-texto-suave-escuro: #B9B8B0; /* apoio em fundo preto */

  /* ---- Semânticas (não são cor de marca) --------------------------------- */
  --color-sucesso: #2F7A3E;
  --color-erro: #B23A2B;
  --color-whatsapp: #25D366;       /* só no ícone do WhatsApp */
  --color-agua: #1F4FB8;           /* só na frota de água potável: identificação em azul exigida pela vigilância sanitária */

  /* ---- Papéis (use estes nos componentes) -------------------------------- */
  --bg: var(--color-concreto);
  --surface: var(--color-branco);
  --fg: var(--color-preto);
  --fg-muted: var(--color-texto-suave);
  --border: var(--color-linha);
  --accent: var(--color-amarelo);
  --accent-ink: var(--color-preto);   /* texto sobre o amarelo */
  --focus: var(--color-amarelo-escuro);

  /* ---- Tipografia ---------------------------------------------------------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(3.25rem, 8.5vw, 7rem);   /* 52 → 112 */
  --fs-h1: clamp(2.5rem, 5.5vw, 4.5rem);       /* 40 → 72 */
  --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem);      /* 28 → 40 */
  --fs-h3: 1.25rem;                            /* 20 */
  --fs-body-lg: 1.125rem;                      /* 18 */
  --fs-body: 1rem;                             /* 16 */
  --fs-small: 0.875rem;                        /* 14 */
  --fs-label: 0.75rem;                         /* 12 */

  --lh-tight: 0.9;
  --lh-snug: 1.15;
  --lh-body: 1.6;
  --tracking-label: 0.16em;

  /* ---- Espaço (base 4px) --------------------------------------------------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1200px;

  /* ---- Forma --------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-w: 1px;

  --shadow-sm: 0 1px 2px rgb(17 17 17 / 0.08);
  --shadow-md: 0 8px 24px -10px rgb(17 17 17 / 0.25);
  --shadow-lg: 0 30px 60px -28px rgb(17 17 17 / 0.45);

  /* Faixa zebrada de obra */
  --tape: repeating-linear-gradient(-45deg, var(--color-amarelo) 0 14px, var(--color-preto) 14px 28px);

  /* ---- Movimento ----------------------------------------------------------- */
  --dur-fast: 160ms;     /* hover, foco */
  --dur-base: 280ms;     /* trocas de estado */
  --dur-slow: 600ms;     /* entradas */
  --dur-xslow: 1200ms;   /* desenhos (mangote) */

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);      /* padrão para entradas */
  --ease-drip: cubic-bezier(0.25, 1.4, 0.5, 1);    /* quique de gota */
  --ease-suck: cubic-bezier(0.6, 0, 0.3, 1);       /* sucção: lento-rápido-lento */
  --stagger: 90ms;                                  /* intervalo entre itens */

  /* ---- Camadas ------------------------------------------------------------- */
  --z-base: 1;
  --z-float: 10;
  --z-nav: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-xslow: 0ms;
    --stagger: 0ms;
  }
}