/* ==========================================================================
   MAX BAGS MALL — Design Tokens
   Palette derived from the brand logo. Void-black studio background,
   warm paper white, and the two logo colors used as directional light
   rather than flat accent chips.
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --void:            #0A0A0B;   /* primary background — staged studio void */
  --void-soft:       #131315;   /* raised panels / cards on void */
  --void-line:       #232326;   /* hairline borders on dark */
  --paper:           #F5F4F1;   /* warm white — gallery wall, not #fff */
  --paper-dim:       #C9C7C2;   /* muted paper for secondary text on dark */
  --steel:           #8A8A8E;   /* neutral secondary text */
  --steel-dim:       #58585C;

  --max-red:         #E31E24;   /* logo red */
  --max-red-glow:    rgba(227, 30, 36, 0.35);
  --max-red-dim:     rgba(227, 30, 36, 0.12);
  --max-indigo:      #2B1B65;   /* logo indigo */
  --max-indigo-bright:#4B2FB0;  /* lifted indigo for glow/hover states */
  --max-indigo-glow: rgba(75, 47, 176, 0.35);
  --max-indigo-dim:  rgba(43, 27, 101, 0.18);

  /* ---- Glass ---- */
  --glass-bg:        rgba(245, 244, 241, 0.04);
  --glass-bg-strong: rgba(245, 244, 241, 0.07);
  --glass-border:    rgba(245, 244, 241, 0.10);
  --glass-blur:      18px;

  /* ---- Type families ---- */
  --font-display:    'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --font-script:     'Fraunces', Georgia, serif;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Type scale (fluid, clamp-based) ---- */
  --fs-hero:    clamp(3.2rem, 9vw, 9rem);
  --fs-xxl:     clamp(2.4rem, 5.5vw, 5rem);
  --fs-xl:      clamp(1.8rem, 3.4vw, 3rem);
  --fs-lg:      clamp(1.3rem, 2vw, 1.8rem);
  --fs-md:      clamp(1.05rem, 1.2vw, 1.25rem);
  --fs-base:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight:   0.92;
  --lh-snug:    1.15;
  --lh-normal:  1.55;

  --ls-tight:   -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.14em;
  --ls-wider:   0.28em;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-5:  3rem;
  --sp-6:  4rem;
  --sp-7:  6rem;
  --sp-8:  8rem;
  --sp-9:  12rem;

  --section-pad-y: clamp(5rem, 12vw, 10rem);
  --edge-pad-x:     clamp(1.5rem, 6vw, 5rem);

  /* ---- Radius ---- */
  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    0.3s;
  --dur-med:     0.6s;
  --dur-slow:    1.1s;

  /* ---- Z-index scale ---- */
  --z-cursor:   9999;
  --z-loader:   9000;
  --z-nav:      800;
  --z-modal:    700;
  --z-overlay:  600;
  --z-content:  10;

  /* ---- Layout ---- */
  --max-width: 1600px;
  --nav-height: 88px;

  /* ---- Shadows ---- */
  --shadow-lift:  0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow-red: 0 0 60px var(--max-red-glow);
  --shadow-glow-indigo: 0 0 60px var(--max-indigo-glow);
}