/* ═══════════════════════════════════════════════════════════════════════════
   Nouram — design tokens
   ═══════════════════════════════════════════════════════════════════════════

   The storefront is a dark house with one metal in it. Everything below either
   describes that house (surface, ink, gold) or the rhythm the pages are set to
   (type scale, section spacing, easing).

   Two rules the rest of the stylesheet leans on:

   1. Gold is a *material*, not a colour swatch. It is used at four strengths —
      a hairline, a wash, a label, a solid — and the alpha tokens below name
      them so a new component does not invent a fifth.

   2. Every size that a phone reads is fluid. `clamp()` with a vw middle term
      means one declaration covers a 360px phone and a 1440px desktop, and the
      type never lands on a value nobody chose.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────────
     Near-black, warmed a fraction so it reads as lacquer rather than as an
     unpainted screen. Each step up is a real step — a 4% lift, which survives
     the aggressive contrast phones apply outdoors. */
  --color-bg: #0a0a0b;
  --color-bg-elevated: #141416;
  --color-bg-panel: #1c1c1f;
  --color-bg-soft: #242428;

  /* ── Ink ────────────────────────────────────────────────────────────────── */
  --color-ink: #f8f7f4;
  --color-charcoal: #ece9e2;
  --color-warm-gray: #a9a29a;

  /* ── Gold ──────────────────────────────────────────────────────────────── */
  --color-gold: #c9a961;
  --color-gold-deep: #9a7a45;
  --color-gold-soft: #e0cca4;

  /* Alpha strengths, named by the job they do. Anything gold in a new
     component should be one of these five, not a fresh rgba(). */
  --gold-rgb: 201, 169, 97;
  --gold-hairline: rgba(201, 169, 97, 0.16); /* a drawn line */
  --gold-edge: rgba(201, 169, 97, 0.30);     /* a border that must be seen */
  --gold-wash: rgba(201, 169, 97, 0.07);     /* a tinted surface */
  --gold-veil: rgba(201, 169, 97, 0.13);     /* a tint over a photograph */
  --gold-halo: rgba(201, 169, 97, 0.42);     /* a focus ring, a glow */

  /* Neutral lines. A hairline is the single most-used decoration on this site;
     it earns tokens so it stays one weight throughout. */
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);

  --color-success: #6bbd8b;
  --color-danger: #d98080;

  /* ── Type ─────────────────────────────────────────────────────────────────
     Reem Kufi sets the headings: a geometric kufi, the register luxury Arabic
     branding is built in — measured strokes, generous counters, architectural
     rather than handwritten. Readex Pro takes everything functional; it was
     drawn for Arabic legibility at interface sizes, which is what a price, a
     size chip and a form label need on a phone.

     Both carry Latin too, so "XL", "186 × 79 cm" and "DZD" no longer fall
     through to a different family mid-line. */
  --font-heading: "Reem Kufi", "Readex Pro", "GE SS Two", "DIN Next LT Arabic", sans-serif;
  --font-body: "Readex Pro", "GE SS Two", "DIN Next LT Arabic", sans-serif;

  /* Fluid scale. The vw term is tuned so the jump from a 360px phone to a
     430px phone is felt but not dramatic, and the desktop ceiling arrives
     before the line gets too long to read. */
  --fs-display: clamp(2.6rem, 11vw, 5.25rem);
  --fs-h1: clamp(2.05rem, 8.4vw, 3.6rem);
  --fs-h2: clamp(1.55rem, 5.8vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 4.2vw, 1.6rem);
  --fs-lead: clamp(1rem, 3.9vw, 1.2rem);
  --fs-body: clamp(0.95rem, 3.5vw, 1.0625rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* Arabic is a cursive script: the letters in a word are *joined*, and
     `letter-spacing` inserts its value into every one of those joins. A
     negative value — the ordinary way to tighten a Latin display line — drags
     connected glyphs into each other and the word stops being legible. Zero is
     the only correct display tracking here.

     The eyebrow can be tracked wide because it is set in short, mostly
     unjoined words at a small size, where the separation reads as inscription
     rather than as damage. */
  --track-display: 0;
  --track-eyebrow: 0.24em;

  /* ── Rhythm ───────────────────────────────────────────────────────────────
     One section spacing token drives the whole site's vertical pace. Raising
     it makes every page breathe; there is no per-page number to chase. */
  --section-y: clamp(3.75rem, 11.5vw, 8rem);
  --section-y-tight: clamp(2.5rem, 8vw, 5rem);
  --gutter: clamp(1.15rem, 5.2vw, 2.5rem);

  --container-max: 1240px;
  --container-narrow: 760px; /* a comfortable measure for running prose */

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 5rem;

  /* ── Elevation ────────────────────────────────────────────────────────────
     Dark pages cannot use shadow to lift a surface — black on black is
     invisible. Depth here comes from the hairline first and the shadow second;
     the shadow only anchors the element to the page. */
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 8px 26px rgba(0, 0, 0, 0.32);
  --shadow-gold: 0 14px 38px rgba(201, 169, 97, 0.22);

  /* ── Motion ───────────────────────────────────────────────────────────────
     One decelerating curve does nearly all the work. Things on this site
     arrive and settle; nothing overshoots, because a bounce reads as playful
     and playful is the opposite of what is being sold. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --transition-fast: 180ms var(--ease-soft);
  --transition-medium: 280ms var(--ease-soft);
  --transition-slow: 620ms var(--ease-out);
}