/* ==========================================================================
   REAL CUSTO — DESIGN TOKENS
   Fonte de verdade para todos os valores de design do site.
   Importar este arquivo em TODAS as páginas, antes de qualquer outro CSS.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     PALETA DE CORES — marca
     -------------------------------------------------------------------------- */
  --brand-navy:    #00144E;   /* cor principal · fundos escuros · logo */
  --brand-royal:   #00009B;   /* azul intermediário · gradientes */
  --brand-blue:    #0786FF;   /* accent principal · CTAs · links */
  --brand-gold:    #F8BA00;   /* accent secundário · badges · highlights */
  --brand-black:   #000000;
  --brand-white:   #FFFFFF;

  /* --------------------------------------------------------------------------
     NEUTRALS — escala fria derivada do navy
     -------------------------------------------------------------------------- */
  --neutral-950:  #060A18;
  --neutral-900:  #0C1228;
  --neutral-800:  #1A2340;
  --neutral-700:  #2A3558;
  --neutral-600:  #3D4F72;
  --neutral-500:  #556990;
  --neutral-400:  #7A8FB0;
  --neutral-300:  #A4B3CC;
  --neutral-200:  #CDD6E6;
  --neutral-100:  #E6ECF5;
  --neutral-50:   #F3F6FB;
  --neutral-0:    #FFFFFF;

  /* --------------------------------------------------------------------------
     SEMÂNTICOS — aliases de uso no layout
     -------------------------------------------------------------------------- */

  /* Superfícies */
  --surface-light:      var(--neutral-0);
  --surface-light-alt:  var(--neutral-50);
  --surface-mid:        var(--neutral-100);
  --surface-dark:       var(--brand-navy);
  --surface-darker:     var(--neutral-950);

  /* Texto sobre superfície clara */
  --text-primary:       var(--neutral-950);
  --text-secondary:     var(--neutral-600);
  --text-muted:         var(--neutral-400);

  /* Texto sobre superfície escura */
  --text-inverse:       var(--neutral-0);
  --text-inverse-muted: var(--neutral-300);

  /* Accent */
  --accent:             var(--brand-blue);
  --accent-hover:       #0670E0;
  --accent-light:       rgba(7, 134, 255, 0.10);
  --gold:               var(--brand-gold);
  --gold-light:         rgba(248, 186, 0, 0.12);

  /* Bordas */
  --border-light:       rgba(0, 20, 78, 0.10);
  --border-mid:         rgba(0, 20, 78, 0.18);
  --border-dark:        rgba(255, 255, 255, 0.10);
  --border-accent:      var(--brand-blue);

  /* --------------------------------------------------------------------------
     GRADIENTES
     -------------------------------------------------------------------------- */
  --gradient-brand:   linear-gradient(90deg, #00144E 0%, #00009B 50%, #0786FF 100%);
  --gradient-accent:  linear-gradient(90deg, #0786FF 0%, #F8BA00 100%);
  --gradient-hero:    linear-gradient(135deg, #00144E 0%, #00009B 60%, #0786FF 100%);
  --gradient-card:    linear-gradient(180deg, rgba(7,134,255,0.06) 0%, rgba(7,134,255,0) 100%);

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

  /* Escala de tamanhos */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  72px;
  --text-7xl:  96px;

  /* Line-heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter-spacings */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.15em;

  /* Pesos */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* --------------------------------------------------------------------------
     ESPAÇAMENTO — base 4px
     -------------------------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* Padding de seção */
  --section-pad-y: 120px;
  --section-pad-x:  72px;

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: var(--section-pad-x);
  --grid-cols:     12;
  --grid-gap:      32px;
  --nav-height:    72px;

  /* --------------------------------------------------------------------------
     BORDAS — raios
     -------------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* --------------------------------------------------------------------------
     SOMBRAS
     -------------------------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(0, 20, 78, 0.06);
  --shadow-sm:   0 2px 8px rgba(0, 20, 78, 0.08);
  --shadow-md:   0 4px 16px rgba(0, 20, 78, 0.10);
  --shadow-lg:   0 8px 32px rgba(0, 20, 78, 0.12);
  --shadow-xl:   0 16px 48px rgba(0, 20, 78, 0.16);
  --shadow-glow: 0 0 32px rgba(7, 134, 255, 0.22);

  /* --------------------------------------------------------------------------
     TRANSIÇÕES & EASING
     -------------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* --------------------------------------------------------------------------
   RESPONSIVO — ajuste de tokens por breakpoint
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --text-7xl:      72px;
    --text-6xl:      56px;
    --text-5xl:      48px;
    --text-4xl:      38px;
    --section-pad-y: 96px;
    --section-pad-x: 40px;
    --grid-gap:      24px;
  }
}

@media (max-width: 768px) {
  :root {
    --text-7xl:      48px;
    --text-6xl:      40px;
    --text-5xl:      36px;
    --text-4xl:      30px;
    --text-3xl:      26px;
    --text-2xl:      22px;
    --section-pad-y: 72px;
    --section-pad-x: 20px;
    --grid-gap:      16px;
    --nav-height:    60px;
  }
}