/* ==========================================================================
   NANA PERFUMES - DESIGN TOKENS (TEMA CLARO / LIGHT THEME)
   Identidade visual refinada inspirada em assets/ref-id-visual.png
   Fontes e espaçamentos otimizados e compactos
   ========================================================================== */

:root {
  /* Cores Principais - Rose Gold & Cobre Metálico (Acentuadas para contraste no Claro) */
  --color-rose-gold-100: #fbf2ef;
  --color-rose-gold-200: #f5dfd9;
  --color-rose-gold-300: #deb0a3;
  --color-rose-gold-400: #c27f6e;
  --color-rose-gold-500: #a96352; /* Tom de Destaque Primário no Claro */
  --color-rose-gold-600: #8f4b3b;
  --color-rose-gold-700: #743729;
  --color-rose-gold-glow: rgba(194, 127, 110, 0.22);
  --color-rose-gold-subtle: rgba(194, 127, 110, 0.08);

  /* Cores Secundárias - Azul Arábico / Arabian Azure */
  --color-azure-100: #edf5fa;
  --color-azure-200: #cfe4f2;
  --color-azure-300: #88bde0;
  --color-azure-400: #4292bf;
  --color-azure-500: #276d94; /* Azul no Claro */
  --color-azure-600: #1b506e;
  --color-azure-700: #12374d;
  --color-azure-glow: rgba(39, 109, 148, 0.2);
  --color-azure-subtle: rgba(39, 109, 148, 0.08);

  /* Acentos de Ouro e Champagne */
  --color-gold-300: #f7e6c4;
  --color-gold-400: #deb868;
  --color-gold-500: #c2953e; /* Ouro mais contrastante */
  --color-gold-600: #9e762a;

  /* Base Clara & Superfícies (Ivory, Marble & Alabaster) */
  --color-bg-deep: #f8f6f2; /* Fundo Geral */
  --color-bg-base: #ffffff; /* Fundo de Cartões / Header */
  --color-bg-surface: #fbf9f6;
  --color-bg-surface-elevated: #f4efe8;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #ffffff;
  --color-bg-glass: rgba(255, 255, 255, 0.92);

  /* Bordas Claras e Metálicas */
  --color-border-subtle: rgba(194, 127, 110, 0.16);
  --color-border-medium: rgba(194, 127, 110, 0.32);
  --color-border-bright: rgba(169, 99, 82, 0.6);
  --color-border-azure: rgba(39, 109, 148, 0.28);

  /* Textos & Tipografia (Alto Contraste no Claro) */
  --color-text-primary: #17202e;
  --color-text-secondary: #3b485a;
  --color-text-muted: #64748b;
  --color-text-dim: #94a3b8;
  --color-text-gold: #9e762a;
  --color-text-rose: #a96352;

  /* Cores de Ação / WhatsApp */
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #1ebd56;
  --color-whatsapp-glow: rgba(37, 211, 102, 0.28);

  /* Gradientes de Luxo */
  --gradient-rose-gold: linear-gradient(135deg, #deb0a3 0%, #a96352 100%);
  --gradient-metallic: linear-gradient(135deg, #a96352 0%, #c2953e 50%, #8f4b3b 100%);
  --gradient-azure: linear-gradient(135deg, #4292bf 0%, #1b506e 100%);
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #fbf9f6 100%);
  --gradient-hero: linear-gradient(180deg, rgba(251, 249, 246, 0.8) 0%, rgba(248, 246, 242, 1) 100%);

  /* Fontes Tipográficas */
  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Escala de Espaçamento Reduzida e Compacta */
  --space-2xs: 0.2rem;   /* ~3px */
  --space-xs: 0.35rem;   /* ~5px */
  --space-sm: 0.55rem;   /* ~8px */
  --space-md: 0.85rem;   /* ~12px */
  --space-lg: 1.15rem;   /* ~16px */
  --space-xl: 1.6rem;    /* ~22px */
  --space-2xl: 2.2rem;   /* ~30px */
  --space-3xl: 3rem;     /* ~42px */

  /* Raios de Borda */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Sombras Claras e Delicadas */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.04), 0 0 1px 1px rgba(194, 127, 110, 0.12);
  --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.09), 0 0 12px rgba(194, 127, 110, 0.2);
  --shadow-glow-rose: 0 0 18px rgba(194, 127, 110, 0.25);
  --shadow-glow-azure: 0 0 18px rgba(39, 109, 148, 0.25);

  /* Transições */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.38s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 500;
  --z-modal: 1000;
}