/* ==========================================================================
   NEXR — Design Tokens (LIGHT, Oula-matched)
   White surfaces, near-black ink, monochrome accent. The header + footer stay
   dark ("brand black") and carry the white wordmark; those chrome colors live
   in --c-ink / --c-ivory, kept dark on purpose. Page/content colors flow
   through the semantic --bg / --text / --surface tokens (light).
   Variable NAMES are stable (components reference them); the Customizer
   overrides the raw --c-* palette vars inline. Fonts: Tilt Warp (display,
   Oula-style) + Inter (body).
   ========================================================================== */

:root {
  /* ---- Raw palette (Customizer-overridable) ---------------------------- */
  --c-ink:        #111111;  /* brand black  — header / footer / badges / CTA  */
  --c-ink-2:      #1b1b1b;  /* lifted black  — footer alt / drawers           */
  --c-surface:    #ffffff;  /* card surface (light)                           */
  --c-surface-2:  #f4f4f2;  /* raised light surface (tiles, modal)            */
  --c-ivory:      #ffffff;  /* light ink on dark chrome                       */
  --c-bone:       #ffffff;  /* alias of ivory (back-compat)                   */
  --c-cream:      #ffffff;  /* alias of ivory (back-compat)                   */
  --c-muted:      #6b6b6b;  /* secondary text on light                        */
  --c-oxblood:    #9a2a2f;  /* deep red — sale badge                          */
  --c-oxblood-2:  #b23238;
  --c-brass:      #111111;  /* monochrome accent (was brass) — CTA / rules    */
  --c-brass-2:    #444444;  /* muted dark — eyebrows / secondary links        */
  --c-accent:     var(--c-brass);
  --c-accent-2:   var(--c-brass-2);
  --c-accent-ink: #ffffff;  /* text on the black accent / button              */
  --c-line:       rgba(17,17,17,.12);  /* hairline dividers on light         */
  --c-line-strong: rgba(17,17,17,.24);
  --c-success:    #2f7d32;
  --c-danger:     #c0392b;  /* sale price / error red                         */
  --c-ink-soft:   var(--c-muted);      /* back-compat alias — muted ink       */
  --c-clay:       var(--c-muted);      /* back-compat alias — placeholder ink */
  --c-bone-2:     var(--c-surface-2);  /* back-compat alias — light tile      */

  /* ---- Semantic surface tokens (LIGHT) --------------------------------- */
  --bg:          #ffffff;
  --bg-alt:      #f6f6f4;
  --surface:     var(--c-surface);
  --surface-ink: var(--c-ink);
  --text:        #111111;
  --text-muted:  var(--c-muted);
  --text-invert: #ffffff;
  --border:      var(--c-line);
  --focus-ring:  #111111;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Tilt Warp", "Poppins", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-ar-display: "Tilt Warp", "Reem Kufi", sans-serif;
  --font-ar-body:    "Inter", "Tajawal", sans-serif;

  /* Fluid type scale — tightened to Oula (14px base, restrained headings) */
  --step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.85rem);
  --step-0:  clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);   /* body ~14–15px */
  --step-1:  clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --step-2:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-3:  clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-4:  clamp(1.6rem, 1.4rem + 1vw, 2.25rem);         /* section titles */
  --step-5:  clamp(1.9rem, 1.55rem + 1.7vw, 2.85rem);
  --step-6:  clamp(2.3rem, 1.75rem + 2.7vw, 3.75rem);      /* hero */
  --step-7:  clamp(2.8rem, 1.9rem + 4.5vw, 5.25rem);

  --lh-tight: 1.02;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --tracking-tight: -0.01em;
  --tracking-wide:  0.14em;

  /* ---- Spacing ---------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.25rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --gutter:    clamp(1rem, 4vw, 3rem);
  --container: 82rem;      /* ~1312px — Oula-width */
  --container-narrow: 46rem;

  /* ---- Radius & elevation ---------------------------------------------- */
  --radius-s: 0px;         /* Oula = square corners */
  --radius-m: 0px;
  --radius-l: 2px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 10px 30px rgba(0,0,0,.10);
  --shadow-3: 0 30px 80px rgba(0,0,0,.14);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast:  0.2s;
  --dur-base:  0.4s;
  --dur-slow:  0.8s;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.68, 0.2);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-index ---------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 60;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 1000;

  color-scheme: light;
}

[dir="rtl"], [lang="ar"] {
  --font-display: var(--font-ar-display);
  --font-body:    var(--font-ar-body);
  --tracking-tight: 0;
  --lh-body: 1.9;
}

/* Sections intentionally placed on brand black (rare, editorial inversion) */
.on-ink {
  --bg: var(--c-ink);
  --text: var(--c-ivory);
  --text-muted: rgba(255,255,255,.7);
  --border: rgba(255,255,255,.16);
  --surface: var(--c-ink-2);
  color: var(--text);
  background: var(--bg);
}