/* ==========================================================================
   IA SEM LIMITES · Design Tokens v1.0
   Fonte única de verdade. Componente nenhum usa hex cru: tudo sai daqui.
   Ordem: tokens.css → base.css → animations.css → components.css
   Tema: claro por padrão. Seção escura com .isl-dark, site inteiro com
   <html data-theme="dark">.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------------------------------------------------------------------
     1. PALETA BRUTA (não usar direto em componente; usar os semânticos)
     --------------------------------------------------------------------- */

  /* Neutros com leve tinta azul. Nunca cinza puro. */
  --isl-white:    #FFFFFF;
  --isl-gray-25:  #FAFBFD;
  --isl-gray-50:  #F5F6FA;  /* papel: fundo do site */
  --isl-gray-100: #EDEFF5;
  --isl-gray-200: #E3E5EE;  /* linha */
  --isl-gray-300: #CDD0DC;
  --isl-gray-400: #A1A4B2;
  --isl-gray-500: #6B6E7D;  /* texto secundário: 4.7:1 no papel */
  --isl-gray-600: #4C4F5C;
  --isl-gray-700: #33353F;
  --isl-gray-800: #1D1F27;
  --isl-gray-900: #111218;  /* tinta: texto principal */
  --isl-gray-950: #07080D;  /* noite: fundo escuro */

  /* Azul Limite — a cor da marca. 500 é a identidade. */
  --isl-blue-50:  #EEF2FF;
  --isl-blue-100: #DFE6FF;
  --isl-blue-200: #C2CFFF;
  --isl-blue-300: #98ADFF;
  --isl-blue-400: #6F8BFF;  /* azul em fundo escuro: 6.5:1 */
  --isl-blue-500: #315CF5;  /* ★ PRIMÁRIA: 5.3:1 no branco */
  --isl-blue-600: #2346D6;
  --isl-blue-700: #1D38AD;
  --isl-blue-800: #1C318A;
  --isl-blue-900: #1A2B6B;
  --isl-blue-950: #0E1640;

  /* Violeta — par do azul. Só em gradiente e acento, nunca sozinho em CTA. */
  --isl-violet-300: #C4A5FB;
  --isl-violet-400: #A57BF7;
  --isl-violet-500: #7C3AED;
  --isl-violet-600: #6A2BD9;
  --isl-magenta-500: #A13CDA;

  /* Ciano — brilho do "infinito". Uso raro: glow, aurora, linha de dado. */
  --isl-cyan-400: #38BDF8;
  --isl-cyan-300: #7DD3FC;

  /* Semântica */
  --isl-green-500: #16A36A;
  --isl-green-400: #34C38A;
  --isl-red-500:   #D54A59;
  --isl-red-400:   #F06B7A;
  --isl-amber-500: #D98E04;
  --isl-amber-400: #F5B23D;
  --isl-whatsapp:  #17B96D;

  /* ---------------------------------------------------------------------
     2. GRADIENTES DE ASSINATURA
     --------------------------------------------------------------------- */
  /* "Infinito": o gradiente da marca. Texto de destaque, CTA de marca, orb. */
  --isl-grad-infinity: linear-gradient(100deg, #315CF5 0%, #6A45F0 50%, #A13CDA 100%);
  /* Versão animável (background-size 200%) pro shimmer do título */
  --isl-grad-infinity-loop: linear-gradient(100deg, #315CF5 0%, #6A45F0 25%, #A13CDA 50%, #6A45F0 75%, #315CF5 100%);
  /* Painel de oferta (o bloco azul-violeta do site, refinado) */
  --isl-grad-panel: linear-gradient(125deg, #2348E0 0%, #5537D6 55%, #7A34CE 100%);
  /* Aurora: fundo do hero e das seções escuras */
  --isl-grad-aurora:
    radial-gradient(60% 50% at 20% 10%, rgba(49, 92, 245, 0.22) 0%, transparent 70%),
    radial-gradient(50% 45% at 85% 20%, rgba(124, 58, 237, 0.20) 0%, transparent 70%),
    radial-gradient(40% 35% at 55% 90%, rgba(56, 189, 248, 0.10) 0%, transparent 70%);
  /* Título em dois tons: começo apagado, fim aceso (estilo Apple) */
  --isl-grad-title-light: linear-gradient(180deg, #111218 0%, #4C4F5C 100%);
  --isl-grad-title-dark:  linear-gradient(180deg, #FFFFFF 0%, #A1A4B2 100%);
  /* Borda que gira em card de destaque */
  --isl-grad-beam: conic-gradient(from var(--isl-beam-angle, 0deg), transparent 0deg, #315CF5 60deg, #A13CDA 120deg, transparent 180deg, transparent 360deg);

  /* ---------------------------------------------------------------------
     3. TIPOGRAFIA
     Pareamento padrão: Geist (display + corpo) · Instrument Serif itálico
     (palavra emocional) · Geist Mono (rótulo e dado).
     Troca de pareamento: data-fonts="inter" | "editorial" no <html>.
     --------------------------------------------------------------------- */
  --isl-font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --isl-font-body:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --isl-font-serif:   'Instrument Serif', 'New York', Georgia, serif;
  --isl-font-mono:    'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Escala fluida (desktop / mobile) */
  --isl-fs-hero:    clamp(3rem, 1.4rem + 7.2vw, 8rem);      /* 128 / 48 */
  --isl-fs-display: clamp(2.625rem, 1.5rem + 5vw, 5.5rem);  /* 88 / 42 */
  --isl-fs-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 4rem);   /* 64 / 36 */
  --isl-fs-h2:      clamp(1.875rem, 1.3rem + 2.4vw, 3rem);  /* 48 / 30 */
  --isl-fs-h3:      clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --isl-fs-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --isl-fs-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 22 / 18: subtítulo Apple */
  --isl-fs-lg:      1.125rem;
  --isl-fs-base:    1rem;
  --isl-fs-sm:      0.875rem;
  --isl-fs-xs:      0.75rem;   /* rótulo e badge, nunca parágrafo */
  --isl-fs-2xs:     0.6875rem; /* eyebrow mono em caixa alta */

  --isl-lh-none:    0.95;
  --isl-lh-tight:   1.04;
  --isl-lh-snug:    1.2;
  --isl-lh-normal:  1.5;
  --isl-lh-relaxed: 1.7;

  --isl-ls-hero:    -0.055em;
  --isl-ls-display: -0.045em;
  --isl-ls-tight:   -0.025em;
  --isl-ls-normal:  -0.011em;  /* Geist pede um leve aperto no corpo */
  --isl-ls-wide:    0.06em;
  --isl-ls-caps:    0.14em;

  --isl-fw-light: 300; --isl-fw-regular: 400; --isl-fw-medium: 500;
  --isl-fw-semibold: 600; --isl-fw-bold: 700; --isl-fw-black: 800;

  /* ---------------------------------------------------------------------
     4. ESPAÇO (base 4px)
     --------------------------------------------------------------------- */
  --isl-space-0: 0;
  --isl-space-1: 0.25rem;  --isl-space-2: 0.5rem;   --isl-space-3: 0.75rem;
  --isl-space-4: 1rem;     --isl-space-5: 1.25rem;  --isl-space-6: 1.5rem;
  --isl-space-8: 2rem;     --isl-space-10: 2.5rem;  --isl-space-12: 3rem;
  --isl-space-16: 4rem;    --isl-space-20: 5rem;    --isl-space-24: 6rem;
  --isl-space-32: 8rem;    --isl-space-40: 10rem;

  --isl-section-y:  clamp(5rem, 3rem + 8vw, 10rem);   /* 80 → 160: respiro Apple */
  --isl-gutter:     clamp(1rem, 0.6rem + 2vw, 2.5rem);

  /* ---------------------------------------------------------------------
     5. RAIO
     --------------------------------------------------------------------- */
  --isl-radius-xs: 6px;
  --isl-radius-sm: 10px;
  --isl-radius-md: 14px;    /* input, botão quadrado */
  --isl-radius-lg: 20px;
  --isl-radius-xl: 28px;    /* ★ card padrão */
  --isl-radius-2xl: 36px;   /* painel, bloco de oferta */
  --isl-radius-pill: 999px; /* botão, badge */

  /* ---------------------------------------------------------------------
     6. SOMBRA E BRILHO (sombra fria, com tinta azul)
     --------------------------------------------------------------------- */
  --isl-shadow-1: 0 1px 2px rgba(17, 18, 40, 0.06), 0 1px 1px rgba(17, 18, 40, 0.04);
  --isl-shadow-2: 0 6px 20px rgba(30, 38, 78, 0.08), 0 2px 6px rgba(30, 38, 78, 0.05);
  --isl-shadow-3: 0 24px 60px rgba(30, 38, 78, 0.12), 0 6px 16px rgba(30, 38, 78, 0.06);
  --isl-shadow-4: 0 50px 120px rgba(30, 38, 78, 0.22), 0 10px 30px rgba(30, 38, 78, 0.08);
  --isl-glow-blue:   0 12px 40px rgba(49, 92, 245, 0.35);
  --isl-glow-violet: 0 12px 40px rgba(124, 58, 237, 0.30);
  --isl-glow-text:   0 0 40px rgba(111, 139, 255, 0.55);

  /* ---------------------------------------------------------------------
     7. MATERIAL (vidro estilo Apple)
     --------------------------------------------------------------------- */
  --isl-blur-sm: saturate(180%) blur(12px);
  --isl-blur-md: saturate(180%) blur(20px);
  --isl-blur-lg: saturate(200%) blur(40px);

  /* ---------------------------------------------------------------------
     8. MOVIMENTO
     --------------------------------------------------------------------- */
  --isl-dur-1: 120ms;   /* press, cor */
  --isl-dur-2: 200ms;   /* hover */
  --isl-dur-3: 320ms;   /* troca de estado */
  --isl-dur-4: 520ms;   /* modal, drawer, acordeão */
  --isl-dur-5: 900ms;   /* reveal de seção */
  --isl-dur-6: 1400ms;  /* entrada do hero */

  --isl-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* padrão de entrada */
  --isl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* troca, slide */
  --isl-ease-apple:  cubic-bezier(0.25, 0.1, 0.25, 1);  /* a curva do apple.com */
  --isl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* switch, check, press */
  --isl-stagger: 70ms;

  /* ---------------------------------------------------------------------
     9. LAYOUT E CAMADAS
     --------------------------------------------------------------------- */
  --isl-container:        1200px;
  --isl-container-wide:   1440px;
  --isl-container-narrow: 820px;
  --isl-prose:            66ch;
  --isl-nav-h:            64px;

  --isl-z-base: 1; --isl-z-dropdown: 100; --isl-z-sticky: 200; --isl-z-nav: 300;
  --isl-z-drawer: 400; --isl-z-modal: 500; --isl-z-toast: 600; --isl-z-tooltip: 700;

  /* ---------------------------------------------------------------------
     10. TOKENS SEMÂNTICOS — TEMA CLARO (padrão)
     Componentes usam SÓ estes. A troca de tema redefine só estes.
     --------------------------------------------------------------------- */
  color-scheme: light;
  --isl-bg:          var(--isl-gray-50);
  --isl-bg-alt:      var(--isl-white);
  --isl-surface:     var(--isl-white);
  --isl-surface-2:   var(--isl-gray-25);
  --isl-surface-3:   var(--isl-gray-100);
  --isl-elevated:    var(--isl-white);
  --isl-text:        var(--isl-gray-900);
  --isl-text-muted:  var(--isl-gray-500);
  --isl-text-faint:  var(--isl-gray-400);   /* só meta ≥ 14px ou decorativo */
  --isl-text-invert: var(--isl-white);
  --isl-border:        rgba(17, 18, 40, 0.08);
  --isl-border-strong: rgba(17, 18, 40, 0.14);
  --isl-accent:        var(--isl-blue-500);
  --isl-accent-hover:  var(--isl-blue-600);
  --isl-accent-soft:   var(--isl-blue-50);
  --isl-accent-text:   var(--isl-blue-500);
  --isl-on-accent:     var(--isl-white);
  --isl-success:     var(--isl-green-500);
  --isl-danger:      var(--isl-red-500);
  --isl-warn:        var(--isl-amber-500);
  --isl-ring:        rgba(49, 92, 245, 0.45);
  --isl-glass:       rgba(255, 255, 255, 0.72);
  --isl-glass-border: rgba(255, 255, 255, 0.6);
  --isl-scrim:       rgba(10, 12, 24, 0.45);
  --isl-grad-title:  var(--isl-grad-title-light);
  --isl-logo-mono-filter: none;  /* logos em currentColor (OpenAI, Grok, GLM) */
}

/* ---------------------------------------------------------------------
   TEMA ESCURO: site inteiro (data-theme) ou só uma seção (.isl-dark)
   --------------------------------------------------------------------- */
[data-theme='dark'],
.isl-dark {
  color-scheme: dark;
  --isl-bg:          var(--isl-gray-950);
  --isl-bg-alt:      #0B0C14;
  --isl-surface:     #101119;
  --isl-surface-2:   #161824;
  --isl-surface-3:   #1F2230;
  --isl-elevated:    #1A1C28;
  --isl-text:        #F5F6FA;
  --isl-text-muted:  #9A9DAD;   /* 7.4:1 */
  --isl-text-faint:  #6E7182;
  --isl-text-invert: var(--isl-gray-900);
  --isl-border:        rgba(255, 255, 255, 0.08);
  --isl-border-strong: rgba(255, 255, 255, 0.16);
  --isl-accent:        var(--isl-blue-500);
  --isl-accent-hover:  #4169FF;
  --isl-accent-soft:   rgba(49, 92, 245, 0.16);
  --isl-accent-text:   var(--isl-blue-400);
  --isl-success:     var(--isl-green-400);
  --isl-danger:      var(--isl-red-400);
  --isl-warn:        var(--isl-amber-400);
  --isl-ring:        rgba(111, 139, 255, 0.6);
  --isl-glass:       rgba(22, 24, 36, 0.62);
  --isl-glass-border: rgba(255, 255, 255, 0.08);
  --isl-scrim:       rgba(2, 3, 8, 0.7);
  --isl-grad-title:  var(--isl-grad-title-dark);
  --isl-logo-mono-filter: invert(1);
  --isl-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.4);
  --isl-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.5);
  --isl-shadow-4: 0 50px 120px rgba(0, 0, 0, 0.6);
}

/* Seção sobre o painel azul-violeta: herda escuro e troca o acento por branco */
.isl-on-brand {
  --isl-text: #FFFFFF;
  --isl-text-muted: rgba(255, 255, 255, 0.78);
  --isl-border: rgba(255, 255, 255, 0.2);
  --isl-accent: #FFFFFF;
  --isl-accent-hover: #EEF2FF;
  --isl-accent-text: #FFFFFF;
  --isl-on-accent: var(--isl-gray-900);
  --isl-glass: rgba(255, 255, 255, 0.12);
  --isl-glass-border: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------------
   PAREAMENTOS ALTERNATIVOS DE FONTE
   Carregar as fontes no <head> (ver README) antes de ativar.
   --------------------------------------------------------------------- */
[data-fonts='inter'] {
  /* Fiel ao site atual, só que com Inter Tight no título */
  --isl-font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --isl-font-body:    'Inter', system-ui, sans-serif;
  --isl-font-serif:   'Instrument Serif', Georgia, serif;
  --isl-font-mono:    'DM Mono', ui-monospace, monospace;
  --isl-ls-normal:    -0.006em;
}
[data-fonts='editorial'] {
  /* Mais humano: Manrope + serifa editorial pra palavra-chave */
  --isl-font-display: 'Manrope', system-ui, sans-serif;
  --isl-font-body:    'Manrope', system-ui, sans-serif;
  --isl-font-serif:   'Newsreader', Georgia, serif;
  --isl-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --isl-ls-hero:      -0.05em;
  --isl-ls-normal:    0;
}

@property --isl-beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}