/* ==========================================================================
   Odera Contábil — Design Tokens
   Extraídos do site atual (oderacontabil.com.br) + manual da marca
   ========================================================================== */

:root {
  /* ---------- Cores da marca ---------- */
  --navy-900: #051425;   /* seções escuras, footer */
  --navy-800: #0C1B33;
  --navy-700: #16233F;
  --navy-600: #1F2C4A;
  --navy-500: #233452;   /* texto principal */
  --navy-400: #2A3259;   /* "Delft Blue" — primária do manual */

  --indigo-600: #232C77; /* azul profundo, gradientes */

  --periwinkle-500: #AEBAFF; /* lilás da marca — acento principal */
  --periwinkle-400: #C2CBFF;
  --periwinkle-300: #D9DEFF;
  --periwinkle-200: #ECEFFF;

  --pink-400: #F2A9DC;   /* acento secundário (CTA "Peça sua proposta") */
  --teal-400: #A8DCD8;   /* acento terciário (sparkle) */

  --paper: #F6F5F4;      /* fundo off-white */
  --white: #FFFFFF;

  --ink-600: #69727D;    /* texto secundário */
  --ink-400: #ADADAD;    /* texto desabilitado, bordas */
  --line: #E4E4E8;       /* divisórias */

  --danger: #D65050;     /* erro de formulário */
  --success: #2E9E6B;

  /* ---------- Papéis semânticos ---------- */
  --bg: var(--paper);
  --bg-elevated: var(--white);
  --bg-inverse: var(--navy-900);
  --text: var(--navy-500);
  --text-muted: var(--ink-600);
  --text-inverse: var(--white);
  --text-inverse-muted: #B8C0D4;
  --accent: var(--periwinkle-500);
  --border: var(--line);
  --border-inverse: rgba(255, 255, 255, 0.14);

  /* ---------- Tipografia ---------- */
  --font-display: 'Figtree', 'Circular Std', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Chivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala fluida — min em 360px, max em 1440px */
  --fs-eyebrow: 0.875rem;                              /* 14px, uppercase tracking */
  --fs-sm: 0.9375rem;                                  /* 15px */
  --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); /* 16 → 17px */
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* 17 → 19px */
  --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);    /* 28 → 40px */
  --fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);     /* 40 → 68px */

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;

  --tracking-eyebrow: 0.12em;
  --tracking-tight: -0.02em;

  /* ---------- Espaçamento (escala 4px) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;

  /* Respiro vertical entre seções — encolhe no mobile */
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(5, 20, 37, 0.06);
  --shadow-md: 0 4px 16px rgba(5, 20, 37, 0.08);
  --shadow-lg: 0 12px 40px rgba(5, 20, 37, 0.12);
  --shadow-inverse: 0 12px 40px rgba(0, 0, 0, 0.35);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 640ms;

  /* ---------- Gradientes de marca ---------- */
  --grad-hero: linear-gradient(115deg, #1B2A52 0%, #232C77 42%, #2E5C7A 100%);
  /* escurece à direita para receber foto de fundo preto sem emenda visível */
  --grad-hero-dark: linear-gradient(100deg, #232C77 0%, #1E2A5C 26%, #16182E 48%, #14100E 68%, #0F0B08 100%);
  --grad-accent: linear-gradient(135deg, var(--periwinkle-500), var(--periwinkle-300));
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}