/* ============================================================
   DETAQUITO STORE — Design Tokens (Original Red, Black & White Palette)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Colors (Original Brand Colors) ── */
  --color-primary:        #0B0B0C;        /* Deep Black */
  --color-primary-hover:  #000000;
  --color-secondary:      #4A4A4A;
  --color-accent:         #C1121F;        /* Detaquito Red */
  --color-accent-hover:   #920C16;        /* Dark Detaquito Red */
  --color-bg:             #F5F5F4;        /* Soft White / Light Gray */
  --color-surface:        #FFFFFF;        /* Pure White */
  --color-dark:           #0B0B0C;        /* Dark background */
  --color-text:           #0B0B0C;
  --color-text-secondary: #555555;
  --color-text-muted:     #888888;
  --color-border:         rgba(11,11,12,0.10);
  --color-border-strong:  rgba(11,11,12,0.20);
  --color-success:        #16A34A;
  --color-danger:         #C1121F;
  --color-promo:          #C1121F;        /* Detaquito Red Promo */
  --color-overlay:        rgba(11,11,12,0.6);
  --color-overlay-light:  rgba(11,11,12,0.3);

  /* ── Typography ── */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Font Sizes ── */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.8125rem; /* 13px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.375rem;  /* 38px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   4rem;      /* 64px */
  --text-6xl:   4.75rem;   /* 76px */

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ── */
  --max-width:       1200px;
  --max-width-wide:  1440px;
  --header-height:   72px;
  --header-height-scrolled: 60px;
  --announcement-height: 40px;
  --announcement-height-mobile: 28px;

  /* ── Borders ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);

  /* ── Transitions ── */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  550ms;
  --duration-slower: 800ms;

  /* ── Z-index ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    1000;
  --z-overlay:   1100;
  --z-drawer:    1200;
  --z-modal:     1300;
  --z-toast:     1400;
  --z-whatsapp:  900;
  --z-announcement: 1050;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}