/* ============================================================
   VISA EXPRESS — Design Tokens
   BrandKit extraído da marca real + direção Dinâmico e Acessível
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {

  /* ----------------------------------------------------------
     CORES — paleta vem do BrandKit (identidade real da marca)
     ---------------------------------------------------------- */

  /* Primária: Verde Visa Express */
  --color-primary:        #00A848;
  --color-primary-dark:   #007D35;
  --color-primary-light:  #00C757;

  /* Secundária: Verde escuro */
  --color-secondary:      #007D35;
  --color-secondary-dark: #005C26;
  --color-secondary-light:#00A848;

  /* Accent: Verde vibrante */
  --color-accent:         #00C757;
  --color-accent-dark:    #00A848;
  --color-accent-light:   #5AE68F;

  /* Extras da paleta do BrandKit */
  --color-brand-orange:   #F77737;
  --color-brand-yellow:   #FCAF45;
  --color-brand-purple:   #833AB4;

  /* Superfícies e texto */
  --color-background:     #FFFFFF;
  --color-surface:        #F8FAFC;
  --color-surface-2:      #F1F5F9;
  --color-border:         #E2E8F0;
  --color-border-light:   #F1F5F9;

  /* Texto — base do BrandKit */
  --color-text:           #262626;
  --color-text-secondary: #64748B;
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #FFFFFF;

  /* Feedback */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-info:           #4CB5F9;

  /* Footer */
  --color-footer-bg:      #0D1F14;
  --color-footer-text:    #FFFFFF;

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

  /* ----------------------------------------------------------
     TIPOGRAFIA — display do BrandKit (moderna sans-serif) +
     direção Dinâmico e Acessível
     ---------------------------------------------------------- */

  /* Display/headings — geométrica com movimento visual */
  --font-display:  'Poppins', sans-serif;

  /* Body — leitura fluida e acessível */
  --font-body:     'Plus Jakarta Sans', sans-serif;

  /* Mono (uso pontual) */
  --font-mono:     'Courier New', monospace;

  /* Escalas de tamanho — mobile-first (base 16px) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */
  --text-6xl:  4.5rem;    /* 72px */

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

  /* Alturas de linha */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Espaçamento entre letras */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.12em;

  /* ----------------------------------------------------------
     ESPAÇAMENTOS — escala harmônica (base 4px)
     ---------------------------------------------------------- */

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

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --container-max:  1200px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1400px;

  --container-padding-mobile:  var(--space-5);
  --container-padding-desktop: var(--space-8);

  /* ----------------------------------------------------------
     BORDAS
     ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */

  --shadow-xs:  0 1px 2px 0 rgba(38, 38, 38, 0.05);
  --shadow-sm:  0 1px 3px 0 rgba(38, 38, 38, 0.10), 0 1px 2px -1px rgba(38, 38, 38, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(38, 38, 38, 0.10), 0 2px 4px -2px rgba(38, 38, 38, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(38, 38, 38, 0.10), 0 4px 6px -4px rgba(38, 38, 38, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(38, 38, 38, 0.10), 0 8px 10px -6px rgba(38, 38, 38, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(38, 38, 38, 0.18);

  /* Sombra colorida (primária) — para cards/CTAs de destaque */
  --shadow-primary:   0 8px 24px -4px rgba(0, 168, 72, 0.30);
  --shadow-secondary: 0 8px 24px -4px rgba(0, 125, 53, 0.30);
  --shadow-accent:    0 8px 24px -4px rgba(0, 199, 87, 0.30);

  /* ----------------------------------------------------------
     TRANSIÇÕES
     ---------------------------------------------------------- */

  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-fab:      500;
  --z-toast:    600;
  --z-top:      999;

  /* ----------------------------------------------------------
     GRADIENTES — usando paleta BrandKit
     (sem gradientes roxo→rosa ou blobs genéricos de IA)
     ---------------------------------------------------------- */

  --gradient-brand:      linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  --gradient-accent:     linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
  --gradient-warm:       linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-surface:    linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 100%);
  --gradient-hero-tint:  linear-gradient(135deg, rgba(0, 168, 72, 0.08) 0%, rgba(0, 125, 53, 0.06) 100%);
}