/* ==========================================================================
   OLIVELAS — Design Tokens & CSS Variables (/novo)
   Visual Reference: olivelassite.html
   ========================================================================== */

:root {
  /* Paleta Base Clássica Editorial */
  --cream: #F7F4EF;
  --cream-warm: #FBF9F5;
  --cream-deep: #EFEAE1;
  --cream-card: #FFFFFF;
  
  --ink: #181716;
  --ink-soft: #2E2B28;
  --ink-mute: #58524B;
  --ink-light: #8E867E;
  
  --gold: #A88C5A;
  --gold-deep: #8E7444;
  --gold-light: #D8C9A8;
  --gold-wash: #EDE4D3;
  --gold-tint: rgba(168, 140, 90, 0.14);
  
  /* Cores de Fragrâncias Autorais */
  --verbena: #768F6E;
  --blue-ocean: #567385;
  --morango: #B28378;
  --mistica: #47525E;
  --orquidea: #552F40;
  --mamae: #9DA399;
  --cravo: #985E3D;
  --lavanda: #786C8D;
  --alfazema: #778E93;
  
  /* Estados & Feedbacks */
  --success: #3E6B4B;
  --success-bg: #eaf2eb;
  --danger: #9c4a4a;
  --danger-bg: #f8ecec;
  --wa-green: #25D366;
  --wa-deep: #1EBE5D;
  --wa-dark: #128C7E;
  
  /* Tipografia */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Layout & Espaçamentos */
  --maxw: 1180px;
  --pad: clamp(20px, 6vw, 80px);
  --header-h: 68px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* Sombras & Efeitos */
  --shadow-subtle: 0 4px 20px rgba(27, 27, 27, 0.05);
  --shadow-card: 0 8px 30px rgba(27, 27, 27, 0.07);
  --shadow-modal: 0 20px 50px rgba(27, 27, 27, 0.25);
  --shadow-drawer: -8px 0 35px rgba(27, 27, 27, 0.15);
  
  /* Transições */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 180ms var(--ease-editorial);
  --t-med: 320ms var(--ease-editorial);
  --t-slow: 480ms var(--ease-editorial);
  
  /* Semântica UI */
  --bg-body: var(--cream);
  --bg-surface: var(--cream-warm);
  --bg-card: var(--cream-card);
  --bg-header: rgba(247, 244, 239, 0.94);
  --border-subtle: #D8CBB6;
  --border-gold: var(--gold);
  --text-main: var(--ink);
  --text-soft: var(--ink-soft);
  --text-mute: var(--ink-mute);
}

/* ==========================================================================
   Tema Escuro de Luxo (Preserva a Elegância Noturna e Alto Contraste)
   ========================================================================== */
[data-theme="dark"] {
  --cream: #141312;
  --cream-warm: #1C1A19;
  --cream-deep: #242220;
  --cream-card: #201E1D;
  
  --ink: #FAF7F2;
  --ink-soft: #E4DDD8;
  --ink-mute: #B3AAA2;
  --ink-light: #736C65;
  
  --gold: #D2BA8E;
  --gold-deep: #E2CDA6;
  --gold-light: #5E5241;
  --gold-wash: #332B22;
  --gold-tint: rgba(210, 186, 142, 0.18);
  
  --bg-body: var(--cream);
  --bg-surface: var(--cream-warm);
  --bg-card: var(--cream-card);
  --bg-header: rgba(20, 19, 18, 0.94);
  --border-subtle: #453F38;
  --border-gold: var(--gold);
  --text-main: var(--ink);
  --text-soft: var(--ink-soft);
  --text-mute: var(--ink-mute);
  
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.7);
}