/* ==========================================================================
   Abisai Handbags — Design Tokens
   Generado a partir de design-system/abisai-handbags/MASTER.md
   ========================================================================== */

:root {
  /* Color — identidad de marca: negro, rojo tinto (#800000, tomado del
     logo), blanco. Paleta elegante, sin dorados. */
  --color-primary: #0E0E0E;
  --color-on-primary: #FFFFFF;
  --color-secondary: #3A3A3A;
  --color-on-secondary: #FFFFFF;
  --color-accent: #800000;
  --color-accent-soft: #A52A2A;
  --color-accent-deep: #5C0000;
  --color-on-accent: #FFFFFF;
  --color-background: #FFFFFF;
  --color-foreground: #121212;
  --color-card: #FFFFFF;
  --color-card-foreground: #121212;
  --color-muted: #F4F4F4;
  --color-muted-foreground: #55504F;
  --color-border: #E2DFDE;
  --color-destructive: #DC2626;
  --color-on-destructive: #FFFFFF;
  --color-ring: #0E0E0E;

  /* Surfaces específicas de marca */
  --color-surface-dark: #0C0C0C;
  --color-surface-dark-2: #161616;
  --color-on-dark: #FAF7F6;
  --color-on-dark-muted: #C7C0BF;

  /* Tipografía */
  --font-heading: 'Cormorant', 'Georgia', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(3.25rem, 8vw, 8rem);
  --fs-h1: clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* Espaciado (density 3/10 — spacious) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.18);

  /* Radios y transición */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --transition-fast: 180ms ease;
  --transition-base: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 550ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Vidrio (uso puntual: nav, overlays, tarjetas destacadas) */
  --glass-bg: rgba(250, 250, 249, 0.65);
  --glass-bg-dark: rgba(20, 17, 15, 0.55);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: blur(14px) saturate(160%);

  --container-max: 1280px;
  --header-h: 84px;
  --promo-h: 34px;
}

@media (max-width: 768px) {
  :root { --header-h: 64px; --promo-h: 30px; }
}