/* =========================================================
   tokens.css — Isla Kite Center Design System v1
   Fonte de verdade: design_system/ISLA-DESIGN-SYSTEM.md
   Visual ref:      design_system/isla-design-system.html
   ========================================================= */

:root {

  /* -------------------------------------------------------
     COLORS — Base (monocromática)
     Paleta principal. Use estas para 90% das decisões.
  ------------------------------------------------------- */
  --white:           #FFFFFF;   /* fundo primário */
  --stone-50:        #FAFAF9;   /* fundo super sutil */
  --stone-100:       #EAEAE5;   /* fundo alternado, divisores */
  --stone-200:       #D4D4CC;   /* bordas sutis */
  --stone-400:       #9A9A90;   /* texto muted, labels, placeholders */
  --stone-600:       #57574F;   /* texto secundário */
  --stone-900:       #1C1C1C;   /* texto primário, botões dark */

  /* Aliases legados — mantidos para compatibilidade */
  --color-bg-primary:   var(--white);
  --color-bg-secondary: var(--stone-100);
  --color-text-primary: var(--stone-900);
  --color-text-muted:   var(--stone-400);
  --color-border:       rgba(0, 0, 0, 0.08);

  /* -------------------------------------------------------
     COLORS — Acento da Marca
     --ocean é o ÚNICO acento geral. Use com moderação.
  ------------------------------------------------------- */
  --ocean:       #185A7D;   /* ⚡ acento principal — lagoa/céu */
  --ocean-dark:  #0F3D56;   /* hover do ocean */
  --ocean-light: #E8F4F8;   /* background sutil em blocos ocean */
  --ocean-teal:  #45C2B1;   /* só para destaques visuais pontuais */

  /* Aliases legados */
  --color-isla-blue: var(--ocean);
  --color-isla-teal: var(--ocean-teal);

  /* -------------------------------------------------------
     COLORS — CTA Especial (uso restrito)
     --cta-orange SOMENTE em badge "Popular" de pricing.
     NÃO usar como cor de seção, fundo ou acento geral.
  ------------------------------------------------------- */
  --cta-orange:       #F39200;

  /* Alias legado */
  --color-isla-orange: var(--cta-orange);

  /* -------------------------------------------------------
     COLORS — Semantic
  ------------------------------------------------------- */
  --color-success:   #22C55E;
  --color-error:     #EF4444;
  --color-whatsapp:  #25D366;

  /* -------------------------------------------------------
     COLORS — Glass Effect
  ------------------------------------------------------- */
  --glass-bg:     rgba(255, 255, 255, 0.65);
  --glass-blur:   blur(12px);
  --glass-border: rgba(255, 255, 255, 0.3);

  /* -------------------------------------------------------
     TYPOGRAPHY — Font Family
     UMA família. Nenhuma outra. Veja ISLA-DESIGN-SYSTEM.md.
  ------------------------------------------------------- */
  --font-sans:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Aliases (todos apontam para Inter) */
  --font-display:  var(--font-sans);
  --font-headline: var(--font-sans);
  --font-body:     var(--font-sans);

  /* -------------------------------------------------------
     TYPOGRAPHY — Font Sizes
  ------------------------------------------------------- */
  --text-hero:    clamp(2.5rem, 8vw, 5rem);
  --text-h2:      clamp(1.75rem, 4vw, 2.75rem);
  --text-h3:      clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;

  /* -------------------------------------------------------
     TYPOGRAPHY — Font Weights
  ------------------------------------------------------- */
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-black:          800;

  /* -------------------------------------------------------
     TYPOGRAPHY — Line Heights
  ------------------------------------------------------- */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* -------------------------------------------------------
     SPACING — Scale
  ------------------------------------------------------- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* -------------------------------------------------------
     SPACING — Section Padding
  ------------------------------------------------------- */
  --section-py-sm:  4rem;
  --section-py-md:  6rem;
  --section-py-lg:  8rem;
  --container-px:   clamp(1rem, 5vw, 5rem);

  /* -------------------------------------------------------
     LAYOUT — Breakpoints (referência — use em @media)
  ------------------------------------------------------- */
  --bp-mobile: 320px;
  --bp-sm:     480px;
  --bp-md:     768px;
  --bp-lg:     1024px;
  --bp-xl:     1280px;
  --bp-2xl:    1440px;

  /* -------------------------------------------------------
     LAYOUT — Container Widths
  ------------------------------------------------------- */
  --container-max:     1440px;
  --container-content: 1200px;
  --container-narrow:  800px;
  --container-card:    400px;

  /* -------------------------------------------------------
     LAYOUT — Grid
  ------------------------------------------------------- */
  --grid-cols-1: repeat(1, 1fr);
  --grid-cols-2: repeat(2, 1fr);
  --grid-cols-3: repeat(3, 1fr);
  --grid-cols-4: repeat(4, 1fr);
  --grid-gap:    1.5rem;
  --grid-gap-lg: 2.5rem;

  /* -------------------------------------------------------
     EFFECTS — Border Radius
  ------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* -------------------------------------------------------
     EFFECTS — Shadows
  ------------------------------------------------------- */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glass:       0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-orange-glow: 0 4px 20px rgba(243, 146, 0, 0.4);
  --shadow-fab:         0 4px 16px rgba(0, 0, 0, 0.2);

  /* -------------------------------------------------------
     EFFECTS — Transitions
  ------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;
  --transition-spring: 900ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-nav:    400ms ease;

  /* -------------------------------------------------------
     Z-INDEX — Scale
  ------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-fab:     400;
  --z-top:     500;

  /* -------------------------------------------------------
     COMPONENT — Navigation
  ------------------------------------------------------- */
  --nav-height:           72px;
  --nav-bg-transparent:   transparent;
  --nav-bg-glass:         rgba(255, 255, 255, 0.85);
  --nav-backdrop:         blur(16px);
  --nav-scroll-threshold: 80;   /* px — lido via JS */

  /* -------------------------------------------------------
     COMPONENT — Hero Section
  ------------------------------------------------------- */
  --hero-height:       100vh;
  --hero-overlay:      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);

  /* -------------------------------------------------------
     COMPONENT — WhatsApp FAB
  ------------------------------------------------------- */
  --fab-size-mobile:  56px;
  --fab-pill-height:  48px;
  --fab-bottom:       24px;
  --fab-right:        24px;

  /* -------------------------------------------------------
     COMPONENT — Pricing Cards
  ------------------------------------------------------- */
  --pricing-highlight-border: 2px solid var(--color-isla-orange);
  --pricing-highlight-shadow: 0 8px 32px rgba(243, 146, 0, 0.2);

}

/* -------------------------------------------------------
   Reduced Motion — desativa animações globalmente
------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}