/* ============================================================
   somado · tokens.css — EDIÇÃO FUTURISTA CLARA (light-first)
   Mesma identidade (laranja gradiente + navy do logo), tema
   claro luminoso: branco-gelo, vidro branco, sombras coloridas,
   laranja como energia. Não inventar cor fora da paleta.
   ============================================================ */

:root {
  /* --- Marca: laranja (cor primária / ação / energia) --- */
  --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 / seções de contraste) --- */
  --navy-900: #0E1A38;   /* navy do logo */
  --navy-800: #14224A;
  --navy-700: #1E2F5C;
  --navy-600: #2C3E70;

  /* --- Neutros (gelo levemente azulado, luminoso) --- */
  --color-bg: #FAFBFE;
  --color-bg-alt: #F2F5FB;     /* seção alternada clara */
  --color-bg-tint: #FFF6EC;    /* seção com leve calor laranja */
  --color-surface: hsl(0 0% 100% / 0.72);   /* vidro branco: usar com blur */
  --color-surface-solid: #FFFFFF;
  --color-text: var(--navy-900);
  --color-text-muted: #5B6680;
  --color-text-dim: #8B95AE;
  --color-text-inverse: #FFFFFF;
  --color-border: #E3E8F2;
  --color-border-strong: #CDD5E6;
  --color-border-glow: hsl(28 95% 55% / 0.45);

  /* --- Vidro claro (glassmorphism de luz) --- */
  --glass-bg: hsl(0 0% 100% / 0.62);
  --glass-bg-strong: hsl(0 0% 100% / 0.82);
  --glass-border: hsl(222 45% 60% / 0.16);
  --glass-highlight: hsl(0 0% 100% / 0.9);

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

  /* --- WhatsApp --- */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1EBE57;

  /* --- Tipografia --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px */
  --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: 4.25rem;    /* 68px — hero desktop, display */

  --lh-tight: 1.08;
  --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 em camadas (luz vem de cima; cor, não cinza) --- */
  --shadow-sm:
    0 1px 2px hsl(222 50% 20% / 0.05),
    0 2px 8px hsl(222 50% 20% / 0.05);
  --shadow-md:
    0 2px 4px hsl(222 50% 20% / 0.05),
    0 8px 22px hsl(222 50% 25% / 0.09),
    0 18px 44px hsl(222 55% 30% / 0.08);
  --shadow-lg:
    0 4px 10px hsl(222 50% 20% / 0.06),
    0 18px 50px hsl(222 55% 30% / 0.14),
    0 38px 90px hsl(222 60% 35% / 0.12);
  --shadow-orange: 0 10px 30px hsl(20 90% 50% / 0.28);
  --glow-orange: 0 0 20px hsl(28 95% 55% / 0.35), 0 8px 40px hsl(20 90% 50% / 0.25);
  --glow-orange-soft: 0 12px 40px hsl(28 95% 55% / 0.16);

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

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.22s;
  --dur-slow: 0.6s;
}

/* --- Propriedades registradas (animações de gradiente nativas) --- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --mesh-x {
  syntax: '<percentage>';
  initial-value: 30%;
  inherits: false;
}
@property --mesh-y {
  syntax: '<percentage>';
  initial-value: 20%;
  inherits: false;
}