/**
 * DESIGN SYSTEM & VISUAL TOKENS
 * Casamento Geovana & Lourenço
 * Referência direta: https://geoelou.my.canva.site/
 */

:root {
  /* ==========================================================================
     1. PALETA DE CORES (Base Canva Confirmada + Neutros Editoriais)
     ========================================================================== */

  /* Cores Base Aproximadas / Neutros Nobres */
  --ivory: #F7F3ED;
  --warm-white: #FCFAF7;
  --sand: #DDD0C1;
  --taupe: #B9A38E;
  --olive: #6F745F;
  --sage: #9CA18A;
  --brown: #57483E;
  --espresso: #322B27;
  --text: #39322E;

  /* Cores Exatas Extraídas da Auditoria Canva */
  --canva-nude: #e0cdb4;          /* Fundo das seções 02, 03, 05, 06, 07, 08, 09, 10-13 */
  --canva-cream: #f3dbb9;         /* Fundo do Hero (Seção 01) */
  --canva-cocoa: #703b23;         /* Fundo nobre das seções 04 (Ballroom) e 14 (Fechamento) */
  --canva-espresso: #4e1a0b;      /* Texto escuro dos títulos e cabeçalhos */
  --canva-terracotta: #915133;    /* Preenchimento dos botões pílula */
  --canva-taupe: #b3a093;         /* Borda fina e marcadores de tempo */
  --pure-white: #ffffff;

  /* Variáveis Semânticas do Sistema */
  --color-background: var(--canva-cream);
  --color-surface: var(--pure-white);
  --color-surface-subtle: var(--ivory);
  --color-primary: var(--canva-espresso);
  --color-secondary: var(--canva-cocoa);
  --color-accent: var(--canva-terracotta);
  --color-text: var(--canva-espresso);
  --color-text-muted: #443228;
  --color-text-secondary: #553b2d;
  --color-text-contrast: #2b170e;
  --color-text-light: var(--warm-white);
  --color-border: var(--canva-taupe);
  --color-border-subtle: rgba(179, 160, 147, 0.3);

  /* Variáveis de Cabeçalho / Navegação */
  --header-bg-transparent: transparent;
  --header-bg-scrolled: rgba(247, 243, 237, 0.94);
  --header-text-initial: var(--canva-espresso);
  --header-text-scrolled: var(--canva-espresso);
  --header-border-scrolled: rgba(179, 160, 147, 0.25);
  --header-backdrop-blur: 12px;
  --header-height: 72px;

  /* ==========================================================================
     2. TIPOGRAFIA & ESCALA RESPONSIVA COM CLAMP()
     ========================================================================== */

  /* Famílias Tipográficas */
  --font-display: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Parisienne', cursive, serif;

  /* Escala Tipográfica Fluida (Mobile -> Desktop) */
  --text-display-xl: clamp(2.75rem, 6vw + 1rem, 5.5rem);       /* 44px -> 88px */
  --text-display-lg: clamp(2.25rem, 4.5vw + 0.75rem, 4rem);     /* 36px -> 64px */
  --text-heading-1: clamp(1.85rem, 3.2vw + 0.5rem, 3rem);       /* 30px -> 48px */
  --text-heading-2: clamp(1.5rem, 2.4vw + 0.25rem, 2.25rem);    /* 24px -> 36px */
  --text-heading-3: clamp(1.25rem, 1.8vw + 0.15rem, 1.65rem);   /* 20px -> 26px */
  --text-body-lg: clamp(1.125rem, 1.2vw + 0.1rem, 1.25rem);     /* 18px -> 20px */
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);         /* 16px -> 17px */
  --text-small: clamp(0.875rem, 0.825rem + 0.15vw, 0.9375rem);  /* 14px -> 15px */
  --text-caption: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);   /* 12px -> 13px */

  /* Alturas de Linha (Line Height) */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.8;

  /* Espaçamento entre Letras (Letter Spacing / Tracking) */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.25em;

  /* ==========================================================================
     3. SISTEMA DE ESPAÇAMENTO (Base 4px -> 128px)
     ========================================================================== */
  --space-4: 0.25rem;     /* 4px */
  --space-8: 0.5rem;      /* 8px */
  --space-12: 0.75rem;    /* 12px */
  --space-16: 1rem;       /* 16px */
  --space-24: 1.5rem;     /* 24px */
  --space-32: 2rem;       /* 32px */
  --space-48: 3rem;       /* 48px */
  --space-64: 4rem;       /* 64px */
  --space-80: 5rem;       /* 80px */
  --space-96: 6rem;       /* 96px */
  --space-128: 8rem;      /* 128px */

  /* ==========================================================================
     4. CONTAINERS E GRIDS
     ========================================================================== */
  --container-max: 1280px;
  --container-editorial: 720px;
  --container-narrow: 920px;

  --gutter-mobile: 20px;
  --gutter-tablet: 32px;
  --gutter-desktop: 48px;

  /* ==========================================================================
     5. BORDAS E RAIO (Border Radius)
     ========================================================================== */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  --border-width-thin: 1px;
  --border-width-medium: 1.5px;

  /* ==========================================================================
     6. TRANSIÇÕES SUAVES (Motion Editorial)
     ========================================================================== */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --transition-fast: 200ms var(--ease-editorial);
  --transition-base: 350ms var(--ease-editorial);
  --transition-smooth: 600ms var(--ease-smooth);
  --transition-slow: 900ms var(--ease-smooth);

  /* ==========================================================================
     7. Z-INDEX
     ========================================================================== */
  --z-base: 1;
  --z-overlay: 10;
  --z-header: 100;
  --z-drawer: 500;
  --z-modal: 1000;
  --z-skiplink: 10000;
}