@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ============================================================
   INSTINTO DARK — Design Tokens
   Story 2.1 | Epic 2: Design System & UI
   Paleta e tipografia aprovadas na Epic 1 (Brand Foundation)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     CORES
     Paleta oficial aprovada em docs/brand/guidelines.md
     ---------------------------------------------------------- */

  --color-bg:          #0a0a0a; /* fundo dominante */
  --color-surface:     #111111; /* cards, containers, placas */
  --color-border:      #222222; /* bordas, divisores, estrutura */
  --color-text:        #f0f0f0; /* leitura principal */
  --color-text-muted:  #888888; /* suporte e informação secundária */
  --color-accent:      #d1ff00; /* acento, energia, CTA e assinatura */

  /* ----------------------------------------------------------
     TIPOGRAFIA — Famílias
     Cormorant Garamond: display, títulos, manifesto, naming hero
     Manrope: interface, textos funcionais, legendas
     ---------------------------------------------------------- */

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Manrope', 'Segoe UI', sans-serif;

  /* ----------------------------------------------------------
     TIPOGRAFIA — Escala de tamanhos
     Base 16px | Escala modular 1.25 (Major Third)
     ---------------------------------------------------------- */

  --text-xs:   12px;  /* legendas, badges, metadados */
  --text-sm:   14px;  /* textos de suporte, botões sm */
  --text-base: 16px;  /* corpo padrão */
  --text-md:   18px;  /* corpo destacado */
  --text-lg:   20px;  /* subtítulos, labels grandes */
  --text-xl:   24px;  /* títulos de seção */
  --text-2xl:  30px;  /* títulos de página */
  --text-3xl:  36px;  /* headings hero mobile */
  --text-4xl:  48px;  /* headings hero desktop */
  --text-5xl:  64px;  /* display / manifesto */

  /* ----------------------------------------------------------
     TIPOGRAFIA — Pesos
     ---------------------------------------------------------- */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ----------------------------------------------------------
     TIPOGRAFIA — Altura de linha
     ---------------------------------------------------------- */

  --leading-tight:   1.1;  /* títulos display grandes */
  --leading-snug:    1.25; /* headings */
  --leading-normal:  1.5;  /* corpo padrão */
  --leading-relaxed: 1.65; /* parágrafos longos */

  /* ----------------------------------------------------------
     TIPOGRAFIA — Espaçamento de letras
     ---------------------------------------------------------- */

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ----------------------------------------------------------
     ESPAÇAMENTO
     Escala em múltiplos de 4px
     ---------------------------------------------------------- */

  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ----------------------------------------------------------
     BORDAS — Raio
     ---------------------------------------------------------- */

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     BORDAS — Largura
     ---------------------------------------------------------- */

  --border-thin:   1px;
  --border-medium: 2px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */

  --shadow-soft:   0 14px 40px rgba(0, 0, 0, 0.28);
  --shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 0 1px rgba(209, 255, 0, 0.12), 0 20px 60px rgba(209, 255, 0, 0.08);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ----------------------------------------------------------
     Z-INDEX — Camadas
     ---------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* ----------------------------------------------------------
     TRANSIÇÕES
     ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;

  /* ----------------------------------------------------------
     LAYOUT — Container
     ---------------------------------------------------------- */

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-pad:  var(--space-lg); /* padding lateral padrão */

}