/* Caminho: public_html/assets/css/tokens.css */
/* PONTO UNICO DE VERDADE DO DESIGN - Math's Car Pneus e Oficina */
/* Tema claro 2026. Cores derivadas do logotipo oficial (laranja + preto sobre branco). */

:root {
  /* ---- Cores da marca ---- */
  --brand: #ED5A0C;            /* laranja principal (acao) */
  --brand-strong: #D24A00;     /* laranja escuro (hover) */
  --brand-soft: #FF7A2E;       /* laranja claro (brilho) */
  --brand-tint: #FFF1E8;       /* laranja diluido (fundos suaves) */
  --brand-glow: rgba(237, 90, 12, .35);

  --ink: #14151A;              /* preto da marca (texto/contraste) */
  --ink-2: #3A3D47;            /* texto secundario */
  --ink-3: #6B6F7B;            /* texto auxiliar */

  /* ---- Superficies (tema claro) ---- */
  --bg: #FFFFFF;               /* fundo base */
  --bg-2: #F7F8FA;             /* fundo alternado */
  --bg-3: #EEF0F4;             /* fundo de cartao sutil */
  --surface: #FFFFFF;          /* cartoes */
  --line: #E6E8EE;             /* bordas/divisores */
  --line-2: #D7DAE2;

  /* ---- Vidro (glassmorphism) ---- */
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-line: rgba(20, 21, 26, .08);
  --glass-blur: 14px;

  /* ---- Tipografia ---- */
  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sign: "Great Vibes", "Segoe Script", cursive;

  /* escala fluida com clamp() */
  --fs-700: clamp(2.6rem, 6.5vw, 5rem);    /* hero */
  --fs-600: clamp(2rem, 4.5vw, 3.25rem);   /* titulo de secao */
  --fs-500: clamp(1.5rem, 2.6vw, 2rem);    /* subtitulo */
  --fs-400: clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-300: 1.0625rem;                     /* corpo */
  --fs-200: 0.9375rem;
  --fs-100: 0.8125rem;                     /* labels */

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Espacamento (ritmo de 4px) ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --container: 1200px;
  --container-narrow: 820px;

  /* ---- Raios ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Sombras suaves (2026, nunca pesadas) ---- */
  --sh-sm: 0 1px 2px rgba(20, 21, 26, .06), 0 2px 8px rgba(20, 21, 26, .05);
  --sh-md: 0 6px 24px rgba(20, 21, 26, .08), 0 2px 6px rgba(20, 21, 26, .05);
  --sh-lg: 0 18px 50px rgba(20, 21, 26, .12);
  --sh-brand: 0 12px 34px var(--brand-glow);

  /* ---- Movimento ---- */
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 108px;

  /* ---- Gradientes e brilhos (redesign 2026) ---- */
  --grad-brand: linear-gradient(135deg, #FF9A55 0%, var(--brand) 52%, var(--brand-strong) 100%);
  --grad-text: linear-gradient(100deg, var(--brand-strong) 0%, var(--brand) 35%, #FF9A55 100%);
  --grad-dark: linear-gradient(150deg, #1b1d27 0%, #0f1016 100%);
  --spot: #14151c;                 /* superficie escura do holofote */
  --ring: conic-gradient(from 140deg, var(--brand-soft), var(--brand), var(--brand-strong), #FFB07A, var(--brand-soft));
  --dur-xslow: 1.1s;
}