/* ==========================================================================
   MISS REZANNA - DESIGN TOKENS (VARIABLES)
   ========================================================================== */

:root {
  /* Colors */
  --color-bg-primary: #F8F6F2; /* Ivory White */
  --color-bg-secondary: #E9E1D6; /* Warm Beige */
  
  --color-text-primary: #2F2F2F; /* Charcoal */
  --color-text-secondary: #5A5A5A; /* Muted Charcoal */
  
  --color-accent: #B8965A; /* Luxury Gold */
  --color-accent-hover: #9E7D46; /* Darker Gold for hover */
  
  --color-border: #DDD7CF;
  --color-border-light: #EBE5DD;
  
  --color-success: #9CAF88; /* Muted Sage */
  --color-error: #8C4A4A; /* Muted Burgundy */

  /* Typography Families */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  /* Typography Sizes */
  --text-display: 4.5rem;   /* 72px */
  --text-h1: 3.5rem;        /* 56px */
  --text-h2: 2.5rem;        /* 40px */
  --text-h3: 2rem;          /* 32px */
  --text-h4: 1.5rem;        /* 24px */
  --text-h5: 1.25rem;       /* 20px */
  --text-body-large: 1.125rem; /* 18px */
  --text-body: 1rem;        /* 16px */
  --text-caption: 0.875rem; /* 14px */
  --text-button: 0.8125rem; /* 13px */

  /* Line Heights */
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --lh-relaxed: 1.8;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.1em; /* For buttons and caps */

  /* Spacing Scale (Base 8px, using generous editorial spacing) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */
  --space-40: 10rem;   /* 160px */

  /* Border Radius (Minimal/sharp for luxury) */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 9999px;

  /* Shadows (Subtle, elegant) */
  --shadow-sm: 0 2px 4px rgba(47, 47, 47, 0.04);
  --shadow-md: 0 4px 12px rgba(47, 47, 47, 0.06);
  --shadow-lg: 0 12px 24px rgba(47, 47, 47, 0.08);
  --shadow-hover: 0 20px 40px rgba(47, 47, 47, 0.12);

  /* Grid Layouts */
  --container-max: 1440px;
  --grid-columns-desktop: 12;
  --grid-columns-tablet: 8;
  --grid-columns-mobile: 4;
  --grid-gap: 24px; /* 1.5rem */

  /* Transitions & Animations */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  
  /* Z-index layers */
  --z-negative: -1;
  --z-normal: 1;
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
}