/* ============================================================================
   TOKENS.CSS — THEME VARIABLES
   Design System V1.0 — Teacher Heloah
   Proposta A: Evolução do Legado / Refined Gradient
   ============================================================================ */

:root {
  /* ===== CORES PRIMÁRIAS ===== */
  
  /* Primary — Identidade principal, CTAs, links */
  --color-primary: #7B3FF2;
  --color-primary-hover: #6A31D9;
  --color-primary-active: #5A28BF;
  
  /* Secondary — Apoio, gradientes */
  --color-secondary: #4C8BF5;
  --color-secondary-hover: #3A7AE3;
  --color-secondary-active: #2969D1;
  
  /* Accent — Pequenos destaques, ícones */
  --color-accent: #B794F6;
  --color-accent-light: #D4C5F9;
  
  
  /* ===== BACKGROUNDS ===== */
  
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB; /* Cinza quase branco */
  --bg-tertiary: #F3F4F6; /* Cinza claro */
  --bg-accent: #FAF8FC; /* Lilás muito claro */
  --bg-overlay: rgba(10, 22, 40, 0.6); /* Mobile menu backdrop */
  
  
  /* ===== CORES DE TEXTO ===== */
  
  --text-primary: #1A1A2E; /* Quase preto, suave */
  --text-secondary: #64748B; /* Cinza médio */
  --text-tertiary: #94A3B8; /* Cinza claro */
  --text-disabled: #CBD5E1; /* Cinza muito claro */
  --text-on-primary: #FFFFFF; /* Texto sobre backgrounds coloridos */
  --text-on-secondary: #FFFFFF;
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-hover);
  
  
  /* ===== BORDERS ===== */
  
  --border-color: #E2E8F0; /* Cinza claro */
  --border-color-hover: #CBD5E1; /* Cinza médio */
  --border-color-focus: var(--color-primary);
  --border-color-accent: var(--color-accent);
  
  
  /* ===== ESTADOS ===== */
  
  /* Success */
  --color-success: #10B981;
  --color-success-bg: #D1FAE5;
  
  /* Error */
  --color-error: #EF4444;
  --color-error-bg: #FEE2E2;
  
  /* Warning */
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  
  
  /* ===== GRADIENTES (MÁXIMO 2 STOPS) ===== */
  
  /* Gradiente CTA — Único permitido em botões */
  --gradient-cta: linear-gradient(135deg, #7B3FF2 0%, #4C8BF5 100%);
  
  /* Gradiente sutil — Backgrounds de seções específicas */
  --gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #FAF8FC 100%);
  
  /* Gradiente hero — Background decorativo sutil no hero */
  --gradient-hero-decoration: linear-gradient(135deg, 
    rgba(123, 63, 242, 0.08) 0%, 
    rgba(76, 139, 245, 0.08) 100%
  );
  
  
  /* ===== TIPOGRAFIA ===== */
  
  /* Família — System fonts (performance) */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 
                 'Helvetica Neue', sans-serif;
  
  /* Tamanhos Desktop */
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 24px;
  --font-size-body-large: 20px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-label: 12px;
  
  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  
  
  /* ===== ESPAÇAMENTO ===== */
  
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;
  
  
  /* ===== RADIUS ===== */
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px; /* Pills */
  
  
  /* ===== SOMBRAS ===== */
  
  /* Sombras sutis */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  
  /* Sombra CTA (com cor de marca) */
  --shadow-cta: 0 4px 12px rgba(123, 63, 242, 0.3);
  --shadow-cta-hover: 0 6px 20px rgba(123, 63, 242, 0.4);
  
  /* Sombra foto hero */
  --shadow-hero: 0 8px 24px rgba(123, 63, 242, 0.15);
}


/* ===== MOBILE OVERRIDES ===== */

@media (max-width: 767px) {
  :root {
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 20px;
    --font-size-body-large: 18px;
    /* body e small mantêm mesmo tamanho em mobile */
  }
}