/* ==========================================================================
   Barbi Girl Gallery — Design tokens
   Single source of truth. Nothing below this file may hardcode a colour.
   ========================================================================== */

:root {
  /* ---- Colour: ink ---------------------------------------------------- */
  --ink:            #23122B;
  --ink-soft:       #4A3352;
  --ink-faint:      #6E5A76;

  /* ---- Colour: brand -------------------------------------------------- */
  --purple:         #7B3B8E;
  --purple-deep:    #5B2A6B;
  --purple-dark:    #2E1636;
  --purple-tint:    #F1E7F4;

  /* ---- Colour: pigment accents (decorative unless noted) -------------- */
  --blush:          #F6C9D3;
  --blush-deep:     #E29CAF;
  --mint:           #7FD4CE;
  --mint-deep:      #4FAFA8;
  --gold:           #E8C36A;
  --gold-deep:      #C29B3E;

  /* ---- Colour: ground ------------------------------------------------- */
  --paper:          #FBF7F4;
  --paper-warm:     #F3ECE7;
  --paper-edge:     #E5DAD2;
  --white:          #FFFFFF;

  /* ---- Colour: semantic ----------------------------------------------- */
  --success:        #2F7D5C;
  --danger:         #B3261E;
  --focus:          var(--purple);

  /* ---- Colour: on-dark ------------------------------------------------ */
  --on-dark:        #F6EFF2;
  --on-dark-soft:   #C6B0CE;

  /* ---- Type ----------------------------------------------------------- */
  --font-display:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:      'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-display:     clamp(2.75rem, 7vw, 5.5rem);
  --fs-h2:          clamp(2rem, 4vw, 3.25rem);
  --fs-h3:          clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:        clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body:        1.0625rem;
  --fs-small:       0.9375rem;
  --fs-spec:        0.75rem;

  --lh-tight:       1.02;
  --lh-snug:        1.14;
  --lh-body:        1.65;

  --tracking-spec:  0.14em;
  --tracking-tight: -0.02em;

  /* ---- Space (8px rhythm) --------------------------------------------- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  --gutter:      clamp(20px, 5vw, 64px);
  --container:   1280px;
  --container-narrow: 780px;

  /* ---- Radius --------------------------------------------------------- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(35, 18, 43, .06),
              0 2px 6px rgba(35, 18, 43, .04);
  --shadow-2: 0 4px 10px rgba(35, 18, 43, .07),
              0 12px 28px rgba(35, 18, 43, .07);
  --shadow-3: 0 10px 24px rgba(35, 18, 43, .10),
              0 28px 60px rgba(35, 18, 43, .12);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:   cubic-bezier(.2, .8, .2, 1);
  --ease-in:    cubic-bezier(.6, .0, .8, .2);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-settle: 520ms;

  /* ---- Layers --------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  40;
  --z-drawer:  80;
  --z-modal:   100;
  --z-loader:  1000;
}

/* Reduced motion: collapse every duration, everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0.01ms;
    --dur-base:   0.01ms;
    --dur-slow:   0.01ms;
    --dur-settle: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   RTL: Arabic needs more leading and zero tracking (tracking breaks joining).
   -------------------------------------------------------------------------- */
[dir="rtl"] {
  --font-display: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --lh-tight: 1.28;
  --lh-snug:  1.42;
  --lh-body:  1.85;
  --tracking-spec:  0;
  --tracking-tight: 0;
}