/* LUMAE BEAUTY - DESIGN SYSTEM & VARIABLES */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Color Palette */
  --bg-main: #FAF7F4;       /* Marfil Cálido */
  --bg-white: #FFFFFF;      /* Blanco Puro */
  --bg-alt: #F0E6E1;        /* Fondo Secundario Suave */
  --bg-subtle: #F6F1ED;     /* Nude Claro */
  
  --color-cacao: #3E2A28;    /* Texto Principal / Cacao */
  --color-cacao-light: #5A4340;
  --color-text-sub: #756967; /* Texto Secundario */
  --color-muted: #9E9391;    /* Texto Atenuado */

  --color-nude: #D7A39A;     /* Nude Rosado */
  --color-nude-hover: #C59087;
  --color-rose: #985D62;     /* Rosa Profundo / Botones de Acción */
  --color-rose-hover: #834D52;
  --color-champagne: #C8A87A;/* Accentos Champagne */

  --border-light: #EBE3DC;
  --border-focus: #D7A39A;

  /* Typography */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --max-width: 1440px;
  --header-height: 80px;
  --topbar-height: 36px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-subtle: 0 4px 20px rgba(62, 42, 40, 0.04);
  --shadow-card: 0 8px 30px rgba(62, 42, 40, 0.06);
  --shadow-hover: 0 14px 40px rgba(62, 42, 40, 0.1);
  --shadow-drawer: -10px 0 30px rgba(62, 42, 40, 0.12);

  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease;
  --transition-smooth: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}