/* ═══════════════════════════════════════════════════════════════════════════
   ALIMAJ THEME — Design Tokens
   The House of Alimaj · BTO Technology Solutions · Memphis, Tennessee
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── ALIMAJ FASHION PALETTE ── */
  --af-ink:        #07070A;   /* near-black background */
  --af-dim:        #111115;   /* slightly lifted dark */
  --af-smoke:      #F5F3EF;   /* warm off-white text */
  --af-blush:      #E8006E;   /* electric pink accent */
  --af-gold:       #C8952A;   /* liquid gold accent */
  --af-fog:        rgba(245, 243, 239, 0.5);

  /* ── ALIMAJ TEXTILES PALETTE ── */
  --at-midnight:   #16104A;   /* deep indigo background */
  --at-deep:       #1A1638;   /* lifted indigo */
  --at-ember:      #C04E22;   /* fired copper accent */
  --at-flax:       #D4A832;   /* spun gold accent */
  --at-linen:      #F0EBE0;   /* raw linen off-white */
  --at-cream:      #FAF7F2;   /* cream */

  /* ── SHARED NEUTRALS ── */
  --white:         #FFFFFF;
  --black:         #000000;
  --grey-100:      rgba(255, 255, 255, 0.06);
  --grey-200:      rgba(255, 255, 255, 0.12);
  --grey-300:      rgba(255, 255, 255, 0.22);
  --grey-400:      rgba(255, 255, 255, 0.38);
  --grey-500:      rgba(255, 255, 255, 0.55);
  --grey-600:      rgba(255, 255, 255, 0.70);
  --grey-700:      rgba(255, 255, 255, 0.85);

  /* ── TYPOGRAPHY ── */
  --font-serif:    'Cormorant Garamond', 'Georgia', serif;
  --font-sans:     'Montserrat', 'Helvetica Neue', 'Arial', sans-serif;

  --weight-thin:   200;
  --weight-light:  300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Type scale — fluid */
  --text-xs:      clamp(0.625rem, 0.8vw, 0.6875rem);   /* 10–11px */
  --text-sm:      clamp(0.6875rem, 0.9vw, 0.75rem);    /* 11–12px */
  --text-base:    clamp(0.875rem, 1.1vw, 1rem);         /* 14–16px */
  --text-md:      clamp(1rem, 1.2vw, 1.125rem);         /* 16–18px */
  --text-lg:      clamp(1.125rem, 1.5vw, 1.375rem);    /* 18–22px */
  --text-xl:      clamp(1.5rem, 2.5vw, 2rem);          /* 24–32px */
  --text-2xl:     clamp(2rem, 4vw, 3.5rem);             /* 32–56px */
  --text-3xl:     clamp(3rem, 6vw, 5.25rem);            /* 48–84px */
  --text-hero:    clamp(4.5rem, 12vw, 14rem);           /* 72–224px */
  --text-display: clamp(8rem, 24vw, 34rem);              /* ghost/watermark */

  /* ── SPACING ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ── LAYOUT ── */
  --nav-h:        70px;
  --max-width:    1440px;
  --gutter:       64px;
  --gutter-sm:    24px;
  --col-gap:      2px;       /* editorial grid gap */

  /* ── BORDERS ── */
  --border-thin:  1px solid rgba(245, 243, 239, 0.06);
  --border-gold:  1px solid rgba(200, 149, 42, 0.25);
  --border-blush: 1px solid rgba(232, 0, 110, 0.15);

  /* ── RADIUS ── */
  --radius-none:  0;
  --radius-sm:    2px;

  /* ── SHADOWS ── */
  --shadow-card:  0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 32px 80px rgba(0, 0, 0, 0.6);
  --shadow-nav:   0 1px 0 rgba(245, 243, 239, 0.05);

  /* ── EASING ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-sharp:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── TRANSITIONS ── */
  --trans-fast:   0.18s var(--ease-sharp);
  --trans-base:   0.35s var(--ease-out);
  --trans-slow:   0.7s  var(--ease-out);
  --trans-reveal: 1.1s  var(--ease-out);

  /* ── Z-INDEX ── */
  --z-below:     -1;
  --z-base:       0;
  --z-above:      1;
  --z-sticky:    10;
  --z-nav:      400;
  --z-overlay:  500;
  --z-modal:   1000;
  --z-cursor:  9998;
  --z-grain:    500;
}

/* ── TEXTILES PAGE OVERRIDES ── */
[data-brand="textiles"] {
  --page-bg:     var(--at-midnight);
  --page-bg-alt: var(--at-deep);
  --page-text:   var(--at-linen);
  --page-accent: var(--at-flax);
  --page-accent2: var(--at-ember);
  --border-thin: 1px solid rgba(240, 235, 224, 0.07);
}

/* ── FASHION PAGE (DEFAULT) ── */
[data-brand="fashion"],
body:not([data-brand]) {
  --page-bg:     var(--af-ink);
  --page-bg-alt: var(--af-dim);
  --page-text:   var(--af-smoke);
  --page-accent: var(--af-gold);
  --page-accent2: var(--af-blush);
}