/* ============================================================
   INTERFALA — css/variables.css
   Design tokens globais. Importe antes de qualquer outro CSS.
   ============================================================ */

/* ── Google Fonts ── */
/* Carregadas via components/header.html automaticamente.
   Se precisar importar aqui também (ex: email, PDF):
   @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700&display=swap');
*/

:root {

  /* ── BRAND CORE ─────────────────────────────────────────── */
  --color-purple:       #7130f0;   /* Primary — CTAs, links ativos */
  --color-purple-dark:  #100a3c;   /* Dark sections, backgrounds escuros */
  --color-purple-light: #ae62ff;   /* Lilás — acentos, gradientes */
  --color-pink:         #dd8cf5;   /* Rosa suave — gradientes decorativos */
  --color-cyan:         #00ffd2;   /* Destaque ciano — badges, highlights */
  --color-cyan-dark:    #00ccaa;   /* Ciano escuro — ícones de check, status */
  --color-lavender:     #f9f7fe;   /* Fundo seções claras */
  --color-ink:          #0a0613;   /* Preto roxeado — fundo dark máximo */
  --color-ink-soft:     #1a1130;   /* Surface dark sections */

  /* ── ESCALA DE CINZAS (purple-tinted) ─────────────────── */
  --color-gray-900: #1a1130;
  --color-gray-700: #4a4365;
  --color-gray-500: #8b85a3;
  --color-gray-300: #d4d0e0;
  --color-gray-100: #f5f3fa;

  /* ── SEMÂNTICOS ─────────────────────────────────────────── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;

  /* ── GRADIENTES ─────────────────────────────────────────── */
  --gradient-brand:   linear-gradient(135deg, #100a3c 0%, #261a5e 100%);
  --gradient-purple:  linear-gradient(135deg, #4d387d 0%, #7130f0 100%);
  --gradient-hero:    linear-gradient(135deg, #100a3c 0%, #4d387d 60%, #7130f0 100%);
  --gradient-soft:    linear-gradient(135deg, #f9f7fe 0%, #e8d6ff 100%);
  --gradient-teal:    linear-gradient(135deg, #7130f0 0%, #00ffd2 100%);
  --gradient-icon:    linear-gradient(135deg, #ae62ff 0%, #d666ff 100%);

  /* ── TIPOGRAFIA ─────────────────────────────────────────── */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;

  /* Font sizes */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  clamp(2.4rem, 4.5vw, 4.2rem);

  /* Font weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:  -0.03em;
  --ls-tighter:-0.04em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;

  /* ── ESPAÇAMENTO ────────────────────────────────────────── */
  --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-28: 112px;

  /* ── BORDAS ─────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ── SOMBRAS (purple-tinted) ────────────────────────────── */
  --shadow-xs:     0 1px 2px rgba(113,48,240,0.06);
  --shadow-sm:     0 2px 8px rgba(113,48,240,0.08);
  --shadow-md:     0 4px 24px rgba(16,10,60,0.08);
  --shadow-lg:     0 8px 32px rgba(113,48,240,0.18);
  --shadow-xl:     0 20px 60px rgba(16,10,60,0.15);
  --shadow-purple: 0 10px 40px rgba(113,48,240,0.25);
  --shadow-lifted: 0 20px 60px rgba(16,10,60,0.15);

  /* ── EASINGS ────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-max: 1180px;
  --container-pad: 24px;
  --section-py:    100px;
  --header-h:      64px;  /* Altura aproximada do header para scroll-padding */

  /* ── ALIASES DE COMPATIBILIDADE ─────────────────────────── */
  /* Mapeiam nomenclatura semântica usada em componentes internos */
  --color-primary:        var(--color-purple);
  --color-secondary:      var(--color-cyan);
  --color-bg:             #fff;
  --color-bg-primary:     #fff;
  --color-bg-secondary:   var(--color-lavender);
  --color-bg-card:        #fff;
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted:     var(--color-gray-500);
  --border-color:         var(--color-gray-300);
  --border-color-light:   var(--color-gray-100);

  /* Font size aliases (--fs-* → --font-size-*) */
  --font-size-xs:   var(--fs-xs);
  --font-size-sm:   var(--fs-sm);
  --font-size-base: var(--fs-base);
  --font-size-md:   var(--fs-md);
  --font-size-lg:   var(--fs-lg);
  --font-size-xl:   var(--fs-xl);

  /* Spacing aliases (--space-* → --spacing-*) */
  --spacing-xs:  var(--space-2);
  --spacing-sm:  var(--space-3);
  --spacing-md:  var(--space-4);
  --spacing-lg:  var(--space-6);
  --spacing-xl:  var(--space-10);
  --spacing-2xl: var(--space-12);
  --spacing-3xl: var(--space-16);
  --spacing-4xl: var(--space-20);
}

/* ── Scroll padding global (compensa header sticky) ── */
html {
  scroll-padding-top: var(--header-h);
  scroll-behavior: smooth;
}