/* ============================================================
   TOKENS.CSS — Protocolo P.A.G.E.
   Design System completo — não editar valores diretamente
   ============================================================ */

:root {

  /* ==========================================
     CORES — FUNDOS
  ========================================== */
  --color-bg-main:        #0A0A0A;
  --color-bg-alt:         #111111;
  --color-bg-card:        #1A1A1A;

  /* ==========================================
     CORES — ACENTO E PRIMÁRIA
  ========================================== */
  --color-primary:        #C8F135;
  --color-primary-dark:   #A8CC1F;
  --color-primary-darker: #8FAF0F;
  --color-primary-10:     color-mix(in srgb, #C8F135 10%, transparent);
  --color-primary-20:     color-mix(in srgb, #C8F135 20%, transparent);
  --color-primary-8:      color-mix(in srgb, #C8F135 8%, transparent);
  --color-primary-25:     color-mix(in srgb, #C8F135 25%, transparent);

  /* ==========================================
     CORES — TEXTO
  ========================================== */
  --color-text-heading:   #FFFFFF;
  --color-text-body:      #A0A0A0;
  --color-text-muted:     #6B6B6B;
  --color-text-on-primary:#0A0A0A; /* NUNCA usar branco sobre botão lime */

  /* ==========================================
     CORES — BORDAS
  ========================================== */
  --color-border:         #2A2A2A;
  --color-border-subtle:  #1F1F1F;
  --color-border-accent:  color-mix(in srgb, #C8F135 25%, transparent);
  --color-border-focus:   #C8F135;

  /* ==========================================
     CORES — SEMÂNTICAS
  ========================================== */
  --color-success:        #22C55E;
  --color-success-bg:     color-mix(in srgb, #22C55E 12%, transparent);
  --color-warning:        #F59E0B;
  --color-warning-bg:     color-mix(in srgb, #F59E0B 12%, transparent);
  --color-warning-border: color-mix(in srgb, #F59E0B 35%, transparent);
  --color-error:          #EF4444;
  --color-error-bg:       color-mix(in srgb, #EF4444 12%, transparent);

  /* ==========================================
     TIPOGRAFIA — FONTES
  ========================================== */
  --font-heading: 'Space Grotesk', 'Geist', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ==========================================
     TIPOGRAFIA — TAMANHOS
  ========================================== */
  --text-h1:       clamp(2.25rem, 5.5vw, 3.75rem);
  --text-h2:       clamp(1.875rem, 3.5vw, 2.625rem);
  --text-h3:       clamp(1.25rem, 2vw, 1.625rem);
  --text-body-lg:  clamp(1.0625rem, 1.5vw, 1.25rem);
  --text-body:     1rem;
  --text-body-sm:  0.9375rem;
  --text-caption:  0.875rem;
  --text-label:    0.75rem;
  --text-cta:      1.0625rem;
  --text-eyebrow:  0.75rem;

  /* ==========================================
     TIPOGRAFIA — PESOS
  ========================================== */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ==========================================
     TIPOGRAFIA — LINE-HEIGHT
  ========================================== */
  --leading-hero:    1.05;
  --leading-heading: 1.15;
  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-body:    1.75;

  /* ==========================================
     TIPOGRAFIA — LETTER-SPACING
  ========================================== */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.12em;

  /* ==========================================
     ESPAÇAMENTO (base 4px)
  ========================================== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  --section-pad-y-desktop:      96px;
  --section-pad-y-desktop-hero: 128px;
  --section-pad-y-mobile:       56px;
  --section-pad-y-mobile-hero:  72px;

  /* ==========================================
     LAYOUT
  ========================================== */
  --max-width-content: 1200px;
  --max-width-copy:    680px;
  --max-width-hero:    900px;
  --max-width-form:    560px;

  /* ==========================================
     BORDAS E RAIOS
  ========================================== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 100px;

  /* ==========================================
     SOMBRAS
  ========================================== */
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 48px rgba(0, 0, 0, 0.6);
  --shadow-cta:  0 0 32px color-mix(in srgb, #C8F135 20%, transparent);

  /* ==========================================
     BOTÕES
  ========================================== */
  --btn-height:   48px;
  --btn-height-lg:52px;

  /* ==========================================
     TRANSIÇÕES
  ========================================== */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-bounce: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================
     Z-INDEX
  ========================================== */
  --z-nav:       90;
  --z-sticky-cta:100;
  --z-modal:     200;
}