/* ============================================================
   🎨 DESIGN TOKENS — Sistema de Design Financeiro
   Baseado na análise visual da landing page de referência
   ============================================================ */
:root {

  /* --- CORES PRIMÁRIAS --- */
  --color-primary:        #0066CC;
  --color-primary-dark:   #004FA3;
  --color-primary-light:  #3399FF;
  --color-primary-bg:     #E8F4FF;

  /* --- GRADIENTES --- */
  --gradient-hero:         linear-gradient(135deg, #0044BB 0%, #0077DD 50%, #22AAFF 100%);
  --gradient-cta-section:  linear-gradient(135deg, #003FA0 0%, #0066CC 50%, #0099EE 100%);
  --gradient-card-purple:  linear-gradient(135deg, #6B21A8 0%, #9333EA 100%);
  --gradient-card-blue:    linear-gradient(135deg, #0044BB 0%, #0088EE 100%);

  /* --- ACENTO / CTA --- */
  --color-accent:          #FFD600;
  --color-accent-hover:    #F5CC00;
  --color-accent-text:     #1A1A1A;

  /* --- NEUTROS --- */
  --color-white:           #FFFFFF;
  --color-gray-50:         #F8FAFC;
  --color-gray-100:        #F1F5F9;
  --color-gray-200:        #E2E8F0;
  --color-gray-300:        #CBD5E1;
  --color-gray-400:        #94A3B8;
  --color-gray-500:        #64748B;
  --color-gray-600:        #475569;
  --color-gray-900:        #0F172A;

  /* --- SEMÂNTICAS --- */
  --color-success:         #22C55E;
  --color-success-bg:      #F0FDF4;
  --color-error:           #EF4444;
  --color-star:            #FFD600;

  /* --- TIPOGRAFIA --- */
  --font-heading:   'Nunito', sans-serif;
  --font-body:      'Nunito Sans', sans-serif;

  /* Escala */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;

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

  /* Line heights */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* --- ESPAÇAMENTO (base 8pt) --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* --- LAYOUT --- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 5vw, 2rem);

  /* --- BORDAS --- */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* --- SOMBRAS --- */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.14);
  --shadow-xl:    0 16px 48px rgba(0,0,0,.18);
  --shadow-card:  0 2px 12px rgba(0,102,204,.10);
  --shadow-cta:   0 4px 24px rgba(255,214,0,.50);
  --shadow-blue:  0 4px 20px rgba(0,102,204,.35);

  /* --- TRANSIÇÕES --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms cubic-bezier(.4,0,.2,1);
  --transition-slow:   400ms cubic-bezier(.4,0,.2,1);
}