/* ==========================================================================
   tokens.css — the single source of truth for the visual language.
   Change a value here and it propagates across the entire store.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Amiri:ital,wght@0,400;0,700;1,400&family=Tajawal:wght@300;400;500;700&display=swap');

:root {
  /* ---------------------------------------------------------- palette --- */
  /* Warm espresso ink, antique gold, ivory paper. */
  --ink:            #191411;
  --ink-2:          #241d18;
  --ink-3:          #33291f;
  --ink-soft:       #4c4139;
  --muted:          #8b7f72;
  --muted-2:        #a89b8c;

  --paper:          #fbf9f5;
  --paper-2:        #f4efe6;
  --paper-3:        #ebe3d6;

  --gold:           #b08d3f;
  --gold-bright:    #d9b76b;
  --gold-deep:      #8a6c28;
  --gold-wash:      rgba(176, 141, 63, 0.10);

  --success:        #3f7d52;
  --success-wash:   rgba(63, 125, 82, 0.12);
  --danger:         #b3402f;
  --danger-wash:    rgba(179, 64, 47, 0.10);
  --info:           #3b6b8f;
  --info-wash:      rgba(59, 107, 143, 0.10);
  --live:           #c0492f;

  /* ------------------------------------------------------- semantics --- */
  --bg:             var(--paper);
  --bg-elevated:    #ffffff;
  --bg-sunken:      var(--paper-2);
  --text:           var(--ink);
  --text-soft:      var(--ink-soft);
  --text-muted:     var(--muted);

  --line:           rgba(25, 20, 17, 0.10);
  --line-strong:    rgba(25, 20, 17, 0.18);
  --line-gold:      rgba(176, 141, 63, 0.30);

  /* Dark surfaces (hero, footer, auction band, admin shell) */
  --dark-bg:        #14100c;
  --dark-bg-2:      #1d1811;
  --dark-elevated:  #241d16;
  --dark-line:      rgba(217, 183, 107, 0.16);
  --dark-text:      #f3ece0;
  --dark-text-soft: #c3b6a3;
  --dark-muted:     #8e8272;

  /* --------------------------------------------------------- type ------ */
  --font-display:   'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — clamp() keeps every heading readable from 320px up. */
  --fs-display:  clamp(2.6rem, 1.4rem + 5.4vw, 5.2rem);
  --fs-h1:       clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
  --fs-h2:       clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem);
  --fs-h3:       clamp(1.28rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-h4:       clamp(1.08rem, 1rem + 0.4vw, 1.22rem);
  --fs-body:     1rem;
  --fs-sm:       0.9075rem;
  --fs-xs:       0.8125rem;
  --fs-2xs:      0.72rem;

  --lh-tight:    1.12;
  --lh-snug:     1.32;
  --lh-body:     1.68;

  --tracking-wide:  0.14em;
  --tracking-wider: 0.22em;

  /* --------------------------------------------------------- space ----- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.75rem;
  --sp-8:  3.5rem;
  --sp-9:  5rem;
  --sp-10: 7rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter:    clamp(1.1rem, 0.6rem + 2.2vw, 2.5rem);
  --maxw:      1280px;
  --maxw-narrow: 780px;

  /* --------------------------------------------------------- radii ----- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* -------------------------------------------------------- shadows ---- */
  --sh-xs: 0 1px 2px rgba(25, 20, 17, 0.05);
  --sh-sm: 0 2px 8px rgba(25, 20, 17, 0.06), 0 1px 2px rgba(25, 20, 17, 0.04);
  --sh-md: 0 8px 24px rgba(25, 20, 17, 0.08), 0 2px 6px rgba(25, 20, 17, 0.04);
  --sh-lg: 0 20px 50px rgba(25, 20, 17, 0.13), 0 6px 14px rgba(25, 20, 17, 0.06);
  --sh-xl: 0 34px 80px rgba(25, 20, 17, 0.20), 0 10px 24px rgba(25, 20, 17, 0.09);
  --sh-gold: 0 10px 34px rgba(176, 141, 63, 0.24);

  /* --------------------------------------------------------- motion ---- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   420ms;
  --t-slower: 700ms;

  /* --------------------------------------------------------- layers ---- */
  --z-header:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-dialog:  400;
  --z-toast:   500;

  /* Header height is read by JS (scroll offsets) and CSS (sticky filters). */
  --header-h: 76px;
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
}

/* --------------------------------------------------------------------------
   Arabic typography.
   Arabic glyphs sit taller and need more leading; the display serif is swapped
   for Amiri, which has the same editorial weight as Cormorant in Latin.
   -------------------------------------------------------------------------- */
:root[lang="ar"] {
  --font-display: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', Georgia, serif;
  --font-body:    'Tajawal', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --lh-tight:  1.32;
  --lh-snug:   1.5;
  --lh-body:   1.9;
  --tracking-wide:  0;
  --tracking-wider: 0;
}