/* ============================================================
   CARTEIRA 360° — DESIGN TOKENS
   Sistema de variáveis para garantir consistência visual.
   Alterar aqui reflete em toda a LP.
   ============================================================ */

:root {
  /* ---------- CORES DE MARCA ---------- */
  --color-blue: #0071BC;          /* Azul Principal — CTAs, destaques, palavra-âncora */
  --color-blue-hover: #0085DC;    /* Hover/clarear do azul principal */
  --color-blue-deep: #005A95;     /* Azul mais escuro para active/sombra */
  --color-navy: #1B1464;          /* Navy — fundos escuros, contraste forte */
  --color-navy-deep: #0F0A3D;     /* Navy mais profundo para topos/gradientes */

  /* ---------- NEUTROS ---------- */
  --color-white: #FFFFFF;
  --color-bg-light: #F2F4F8;      /* Fundo claro de seções alternadas */
  --color-bg-lighter: #F8FAFC;    /* Variação ainda mais clara */
  --color-text-primary: #0E1430;  /* Texto principal sobre fundos claros */
  --color-text-secondary: #4A5378;/* Texto de apoio sobre fundos claros */
  --color-text-muted: #6B7593;    /* Texto secundário/legendas */
  --color-text-on-dark: #E5E9F4;  /* Texto principal sobre fundos escuros */
  --color-text-on-dark-muted: #9AA3C2; /* Texto secundário sobre fundos escuros */
  --color-border: #E1E5EE;        /* Bordas sutis */
  --color-border-strong: #C9D0DE; /* Bordas mais visíveis */

  /* ---------- TINTAS DE APOIO ---------- */
  --color-blue-tint-soft: rgba(0, 113, 188, 0.06);  /* Fundo de cards "tocados" pelo azul */
  --color-blue-tint: rgba(0, 113, 188, 0.12);
  --color-blue-glow: rgba(0, 113, 188, 0.35);       /* Glow de botões */
  --color-success: #10B981;        /* Verde para "É pra você se" */
  --color-success-soft: #ECFDF5;
  --color-warning: #DC2626;        /* Vermelho usado APENAS para "Não é pra você se" (X) */
  --color-warning-soft: #FEF2F2;

  /* ---------- TIPOGRAFIA ---------- */
  /* Display = headlines, números grandes, badges. Body = parágrafos, UI. */
  --font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Pesos */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Escala tipográfica fluida (clamp = responsivo nativo) */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);    /* 12-13px */
  --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);   /* 14-15px */
  --fs-base: 1rem;                                          /* 16px */
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);       /* 17-18px */
  --fs-xl: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);      /* 18-20px */
  --fs-2xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);     /* 22-26px */
  --fs-3xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);         /* 28-36px */
  --fs-4xl: clamp(2.125rem, 1.7rem + 1.8vw, 3rem);         /* 34-48px */
  --fs-5xl: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);        /* 40-60px */
  --fs-hero: clamp(2.25rem, 1.6rem + 3vw, 4rem);           /* 36-64px — headline do hero */

  /* Entrelinha */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Tracking (letter-spacing) */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* ---------- ESPAÇAMENTOS ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Padding vertical de seções (responsivo) */
  --section-py: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --section-py-tight: clamp(2.5rem, 1.5rem + 3vw, 4rem);

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-px: clamp(1rem, 2.5vw, 1.5rem);

  /* ---------- BORDAS / RAIOS ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 10, 61, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 10, 61, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 10, 61, 0.12);
  --shadow-xl: 0 24px 60px rgba(15, 10, 61, 0.18);
  --shadow-cta: 0 10px 28px rgba(0, 113, 188, 0.35), 0 2px 4px rgba(0, 113, 188, 0.2);
  --shadow-cta-hover: 0 16px 40px rgba(0, 113, 188, 0.45), 0 2px 6px rgba(0, 113, 188, 0.25);

  /* ---------- TRANSIÇÕES ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* ---------- Z-INDEX ---------- */
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 50;
  --z-modal: 100;
  --z-tooltip: 200;
}