/* ============================================================
   somado · tokens.css
   Paleta derivada da identidade visual (pasta somado-id):
   laranja gradiente + azul-marinho (navy). Não inventar
   cor fora desta paleta — tudo sai daqui.
   ============================================================ */

:root {
  /* --- Marca: laranja (cor primária / ação) --- */
  --orange-300: #FDBE4D;
  --orange-400: #FBA81A;   /* topo do gradiente do logo */
  --orange-500: #F7841B;   /* laranja base / cor primária */
  --orange-600: #F15A22;   /* base do gradiente do logo */
  --orange-700: #D8470F;
  --grad-orange: linear-gradient(135deg, #FBA81A 0%, #F15A22 100%);
  --grad-orange-soft: linear-gradient(135deg, #FDBE4D 0%, #F7841B 100%);

  --color-primary: var(--orange-500);
  --color-primary-strong: var(--orange-600);
  --color-primary-soft: #FFF1E2;       /* laranja muito claro p/ fundos */

  /* --- Navy (base escura / texto principal) --- */
  --navy-900: #0E1A38;   /* navy do logo */
  --navy-800: #14224A;
  --navy-700: #1E2F5C;
  --navy-600: #2C3E70;

  /* --- Neutros (cinza levemente azulado) --- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F8FC;     /* seção alternada clara */
  --color-bg-tint: #FFF7EF;    /* seção com leve calor laranja */
  --color-surface: #FFFFFF;
  --color-text: var(--navy-900);
  --color-text-muted: #5B6680;
  --color-text-inverse: #FFFFFF;
  --color-border: #E3E8F2;
  --color-border-strong: #CDD5E6;

  /* --- Semânticas --- */
  --color-success: #1E9E5A;
  --color-error: #D8453B;
  --color-warning: #E8A317;

  /* --- WhatsApp (botão flutuante / ícone) --- */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1EBE57;

  /* --- Tipografia --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px (corpo confortável) */
  --fs-md: 1.1875rem;   /* 19px */
  --fs-lg: 1.5rem;      /* 24px */
  --fs-xl: 2rem;        /* 32px */
  --fs-2xl: 2.625rem;   /* 42px */
  --fs-3xl: 3.25rem;    /* 52px */
  --fs-4xl: 3.75rem;    /* 60px — só hero desktop */

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.6;

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

  /* --- Espaçamento (escala base 8px) --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-10: 5rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* --- Raios --- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 3px hsl(220 40% 15% / 0.07);
  --shadow-md: 0 6px 20px hsl(220 40% 15% / 0.09);
  --shadow-lg: 0 18px 50px hsl(220 40% 15% / 0.14);
  --shadow-orange: 0 10px 30px hsl(20 90% 50% / 0.28);

  /* --- Layout --- */
  --max-w: 1180px;
  --max-w-text: 720px;
  --gutter: 1.25rem;

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.22s;
}