/* ==========================================================================
   DESIGN TOKENS & SYSTEM VARIABLES — NINA BRAGA FOTOGRAFIA
   Paleta e diretrizes definidas no briefing para transmitir afeto,
   leveza litorânea e sofisticação editorial.
   ========================================================================== */

:root {
  /* Paleta Cromática Primária */
  --color-ivory: #F7F3ED;          /* Fundo principal — luz natural suave */
  --color-sand: #E5DACE;           /* Fundo secundário — bege areia confortável */
  --color-sand-light: #EFE8DF;     /* Areia ultra suave para cartões e hover */
  --color-white: #FFFFFF;          /* Branco puro para cartões e modais */
  
  /* Contraste e Tipografia */
  --color-espresso: #352E29;       /* Marrom profundo — texto principal e botões */
  --color-text-muted: #6C6057;     /* Tom de apoio — parágrafos secundários */
  --color-text-light: #8E8075;     /* Legendas e metadados */
  
  /* Detalhes e Acentos Sutis */
  --color-taupe: #9B8776;          /* Bordas e linhas divisórias discretas */
  --color-taupe-light: rgba(155, 135, 118, 0.2);
  --color-slate-blue: #A9BEC3;     /* Azul suave acinzentado — toque do mar */
  --color-slate-blue-light: rgba(169, 190, 195, 0.25);
  --color-sun-gold: #C8AB78;       /* Dourado suave — luz de fim de tarde */
  --color-sun-gold-light: rgba(200, 171, 120, 0.2);

  /* Elementos de Conversão */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #20BA5A;
  --color-whatsapp-dark: #128C7E;

  /* Tipografia */
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Escala Modular de Tipografia Fluida (clamp para perfeita adaptação mobile -> desktop) */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --font-size-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-lg: clamp(1.35rem, 1.2rem + 0.75vw, 1.625rem);
  --font-size-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --font-size-2xl: clamp(2.25rem, 1.85rem + 2vw, 3.125rem);
  --font-size-3xl: clamp(2.75rem, 2.2rem + 2.75vw, 4.25rem);

  /* Espaçamento Consistente */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  /* Bordas & Arredondamentos */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Sombras Sutis e Naturais (evitar sombras pesadas artificiais) */
  --shadow-subtle: 0 4px 20px -2px rgba(53, 46, 41, 0.05);
  --shadow-card: 0 10px 30px -5px rgba(53, 46, 41, 0.08);
  --shadow-float: 0 20px 40px -10px rgba(53, 46, 41, 0.15);
  --shadow-lightbox: 0 25px 60px -15px rgba(0, 0, 0, 0.6);

  /* Transições Fluídas */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 860px;
  --header-height: 80px;
}