/* ============================================================
   LUSTRAVVIA — Design Token System
   Every detail. Arranged.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ─── COLOR PALETTE ─────────────────────────────────────── */

  /* Dark foundations */
  --lv-void:         hsl(220, 15%, 6%);     /* near-black primary */
  --lv-abyss:        hsl(220, 18%, 4%);     /* deepest dark */
  --lv-charcoal:     hsl(220, 12%, 12%);    /* elevated surfaces */
  --lv-slate:        hsl(220, 10%, 18%);    /* cards, panels */
  --lv-graphite:     hsl(220, 8%, 28%);     /* borders, dividers */

  /* Neutral range */
  --lv-mist:         hsl(220, 6%, 52%);     /* secondary text */
  --lv-silver:       hsl(220, 6%, 68%);     /* subtle metallic */
  --lv-stone:        hsl(35, 10%, 82%);     /* warm light surface */
  --lv-ivory:        hsl(40, 16%, 92%);     /* editorial backgrounds */
  --lv-white:        hsl(0, 0%, 99%);       /* pure white */

  /* Warm accents (used sparingly) */
  --lv-platinum:     hsl(40, 12%, 78%);     /* warm metallic */
  --lv-champagne:    hsl(38, 22%, 68%);     /* champagne accent */
  --lv-accent:       hsl(36, 30%, 62%);     /* primary accent — warm gold */
  --lv-accent-dim:   hsl(36, 20%, 50%);     /* dimmed accent */

  /* Semantic */
  --lv-success:      hsl(152, 35%, 45%);
  --lv-warning:      hsl(38, 75%, 55%);
  --lv-error:        hsl(0, 45%, 50%);
  --lv-info:         hsl(210, 40%, 50%);

  /* Availability states */
  --lv-available:    hsl(152, 30%, 42%);
  --lv-pending:      hsl(38, 60%, 50%);
  --lv-unavailable:  hsl(0, 35%, 48%);
  --lv-request-only: hsl(220, 20%, 50%);


  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */

  --font-display:    'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-interface:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Type scale — major third (1.25) modular */
  --text-2xs:   0.64rem;    /* 10.24px */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --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.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */
  --text-6xl:   4.5rem;     /* 72px */
  --text-7xl:   6rem;       /* 96px */
  --text-8xl:   8rem;       /* 128px */

  /* Display scale (Cormorant) */
  --display-sm:  clamp(2.5rem, 5vw, 4rem);
  --display-md:  clamp(3.5rem, 7vw, 6rem);
  --display-lg:  clamp(5rem, 10vw, 9rem);
  --display-xl:  clamp(6rem, 12vw, 12rem);

  /* Letter spacing */
  --tracking-tightest: -0.05em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.05em;
  --tracking-wider:     0.1em;
  --tracking-widest:    0.2em;
  --tracking-label:     0.15em;   /* for uppercase labels */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   2;


  /* ─── SPACING ────────────────────────────────────────────── */

  --space-1:    0.25rem;    /* 4px */
  --space-2:    0.5rem;     /* 8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */
  --space-40:   10rem;      /* 160px */
  --space-48:   12rem;      /* 192px */
  --space-64:   16rem;      /* 256px */

  /* Section padding */
  --section-padding-y:  clamp(5rem, 10vw, 10rem);
  --section-padding-x:  clamp(1.5rem, 5vw, 5rem);

  /* Container */
  --container-max:      1440px;
  --container-content:  1200px;
  --container-narrow:   860px;


  /* ─── BORDERS & RADIUS ──────────────────────────────────── */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-2xl:   40px;
  --radius-full:  9999px;

  --border-subtle:   1px solid rgba(255, 255, 255, 0.06);
  --border-dim:      1px solid rgba(255, 255, 255, 0.10);
  --border-muted:    1px solid rgba(255, 255, 255, 0.16);
  --border-visible:  1px solid rgba(255, 255, 255, 0.24);

  --border-dark-subtle:  1px solid rgba(0, 0, 0, 0.06);
  --border-dark-dim:     1px solid rgba(0, 0, 0, 0.12);
  --border-dark-muted:   1px solid rgba(0, 0, 0, 0.20);


  /* ─── SHADOWS ───────────────────────────────────────────── */

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.12);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.10);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.20);
  --shadow-xl:   0 16px 70px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.25);
  --shadow-2xl:  0 32px 120px rgba(0,0,0,0.55);

  /* Glow effects */
  --glow-accent:   0 0 40px rgba(186, 148, 96, 0.2);
  --glow-white:    0 0 30px rgba(255, 255, 255, 0.08);


  /* ─── MOTION ─────────────────────────────────────────────── */

  /* Durations */
  --dur-instant:  80ms;
  --dur-fast:     150ms;
  --dur-normal:   250ms;
  --dur-slow:     400ms;
  --dur-slower:   600ms;
  --dur-slowest:  900ms;
  --dur-cinematic: 1200ms;

  /* Easing */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:   cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxury:   cubic-bezier(0.25, 0, 0, 1);     /* precision deceleration */
  --ease-reveal:   cubic-bezier(0.0, 0.0, 0.2, 1);  /* material-style reveal */

  /* Standard transitions */
  --transition-fast:    var(--dur-fast) var(--ease-out);
  --transition-normal:  var(--dur-normal) var(--ease-out);
  --transition-slow:    var(--dur-slow) var(--ease-luxury);
  --transition-reveal:  var(--dur-slowest) var(--ease-luxury);


  /* ─── Z-INDEX ────────────────────────────────────────────── */

  --z-base:        0;
  --z-raised:      10;
  --z-overlay:     100;
  --z-drawer:      200;
  --z-modal:       300;
  --z-nav:         400;
  --z-concierge:   500;
  --z-cursor:      900;
  --z-top:         1000;


  /* ─── LAYOUT ─────────────────────────────────────────────── */

  --nav-height:         72px;
  --nav-height-mobile:  60px;
  --concierge-width:    480px;
  --drawer-width:       440px;

}


/* ─── DARK SURFACE OVERRIDES (contextual) ─────────────────── */

.surface-dark {
  --text-primary:    var(--lv-white);
  --text-secondary:  var(--lv-silver);
  --text-tertiary:   var(--lv-mist);
  --border-color:    var(--border-subtle);
  --bg-raised:       var(--lv-charcoal);
}

.surface-light {
  --text-primary:    var(--lv-void);
  --text-secondary:  var(--lv-graphite);
  --text-tertiary:   var(--lv-mist);
  --border-color:    var(--border-dark-subtle);
  --bg-raised:       var(--lv-white);
}


/* ─── REDUCED MOTION ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant:   0ms;
    --dur-fast:      0ms;
    --dur-normal:    0ms;
    --dur-slow:      0ms;
    --dur-slower:    0ms;
    --dur-slowest:   0ms;
    --dur-cinematic: 0ms;
  }
}