/* ============================================================================
   IMPERIUM — DESIGN TOKENS
   Single source of truth for the black-and-gold visual identity.
   Change a value here and it cascades across the entire site.
   ========================================================================== */

:root {
  /* --- Core palette -------------------------------------------------------
     Deep blacks and charcoals for grounds; restrained metallic golds for
     highlights; warm champagne for secondary accents; off-white for text. */
  --imp-black:        #0a0a0b;   /* page ground */
  --imp-black-2:      #0f0f11;   /* raised ground */
  --imp-charcoal:     #17171a;   /* cards / panels */
  --imp-charcoal-2:   #1e1e22;   /* raised cards / inputs */
  --imp-line:         #2a2a30;   /* hairlines / borders */
  --imp-line-soft:    #202024;

  /* Champagne-gold — matched to the IMPERIUM.BH logo. Warm, soft, never neon. */
  --imp-gold:         #cbb082;   /* primary champagne-gold (logo body) */
  --imp-gold-deep:    #a2854f;   /* shadowed gold */
  --imp-gold-bright:  #ecdcb6;   /* lit edge / highlight */
  --imp-champagne:    #e9dcc1;   /* warm champagne secondary accent */

  /* Text — off-white only where readability requires it. */
  --imp-ivory:        #f4efe6;   /* primary text on dark */
  --imp-ivory-dim:    #c9c3b8;   /* secondary text */
  --imp-muted:        #8d887e;   /* tertiary / captions */
  --imp-muted-2:      #64615b;   /* disabled / faint */

  --imp-on-gold:      #12100c;   /* text placed on a gold fill */
  --imp-success:      #6fae7f;
  --imp-danger:       #cf6b5a;

  /* Metallic gradient — for the wordmark sheen and seal, used sparingly.
     Layered stops emulate brushed metal rather than a cheap yellow ramp. */
  --imp-metal: linear-gradient(
      100deg,
      #9c7c48 0%, #cbb082 20%, #f2e6c9 42%,
      #e2cd9f 52%, #bf9e68 70%, #a2854f 84%, #e0cba0 100%);

  /* --- Typography ---------------------------------------------------------
     Elegant serif for display headlines; clean sans for UI & product info. */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (clamp = min, preferred-vw, max) */
  --fs-display:  clamp(2.75rem, 1.6rem + 5.6vw, 7rem);
  --fs-h1:       clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-h2:       clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --fs-h3:       clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  --fs-lead:     clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;

  --lh-tight:    1.04;
  --lh-snug:     1.22;
  --lh-body:     1.6;

  /* Letter-spacing — wide tracking on eyebrows reads as couture. */
  --ls-wordmark: 0.42em;
  --ls-eyebrow:  0.34em;
  --ls-nav:      0.16em;
  --ls-tight:    -0.01em;

  /* --- Space scale (8px base) --------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 11rem;

  --container:      1320px;
  --container-narrow: 880px;
  --gutter:         clamp(1.25rem, 4vw, 4rem);

  /* --- Radius, borders, shadow -------------------------------------------- */
  --r-sm: 2px;  --r-md: 4px;  --r-lg: 8px;  --r-xl: 14px; --r-pill: 999px;

  --border-hair: 1px solid var(--imp-line);
  --border-gold: 1px solid color-mix(in srgb, var(--imp-gold) 55%, transparent);

  --shadow-card: 0 18px 50px -24px rgba(0,0,0,0.9);
  --shadow-pop:  0 30px 80px -30px rgba(0,0,0,0.95);
  --glow-gold:   0 0 0 1px color-mix(in srgb, var(--imp-gold) 40%, transparent),
                 0 10px 40px -18px color-mix(in srgb, var(--imp-gold) 45%, transparent);

  /* --- Motion ------------------------------------------------------------- */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --e-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast:  180ms;
  --t-med:   360ms;
  --t-slow:  680ms;

  /* --- Layering ----------------------------------------------------------- */
  --z-hero: 1; --z-sticky: 40; --z-header: 60; --z-drawer: 80;
  --z-intro: 95; --z-modal: 100; --z-toast: 110;

  --header-h: 76px;
  color-scheme: dark;
}

/* Respect users who ask for less motion: neutralise long/looping transitions. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
}