/* ============================================
   LUXE STORE — Design Tokens / CSS Variables
   ============================================ */

:root {
  /* Brand Palette */
  --clr-obsidian:    #0D0D0D;
  --clr-void:        #111318;
  --clr-carbon:      #1A1D24;
  --clr-slate:       #252933;
  --clr-graphite:    #353B4A;
  --clr-mist:        #8A93A8;
  --clr-silver:      #C4CAD8;
  --clr-ivory:       #F5F3EE;
  --clr-pure:        #FFFFFF;

  /* Accent — Champagne Gold */
  --clr-gold:        #C9A84C;
  --clr-gold-light:  #E8C97A;
  --clr-gold-dark:   #9B7D34;
  --clr-gold-glow:   rgba(201, 168, 76, 0.18);

  /* Semantic */
  --clr-success:     #27C96A;
  --clr-danger:      #FF4D6D;
  --clr-warning:     #FFB84D;
  --clr-info:        #4DAAFF;

  /* Typography */
  --ff-display:      'Playfair Display', Georgia, serif;
  --ff-body:         'DM Sans', -apple-system, sans-serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.375rem;
  --fs-xl:    1.75rem;
  --fs-2xl:   2.25rem;
  --fs-3xl:   3rem;
  --fs-4xl:   4rem;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

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

  /* Borders & Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --border-subtle: 1px solid rgba(255,255,255,0.06);
  --border-muted:  1px solid rgba(255,255,255,0.10);
  --border-gold:   1px solid rgba(201,168,76,0.35);

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.6);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 30px rgba(201,168,76,0.25);

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-xslow:  600ms;

  /* Layout */
  --navbar-h:    72px;
  --sidebar-w:   260px;
  --container-max: 1400px;

  /* Z-index layers */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   9999;
}