/* ALJILD design tokens — WEB-01
 *
 * Drop into the child theme and enqueue before every other stylesheet.
 * Colours, type stack and bilingual rules are the only things in here; layout
 * belongs to the theme.
 *
 * The bilingual block at the bottom is not cosmetic. It encodes §2.2 of the
 * brand system — the rules that stop Arabic from rendering broken.
 */

:root {
  /* ---- palette (locked) ---- */
  --aljild-obsidian:       #121212;  /* primary ground, type base       */
  --aljild-saddle-tan:     #96572E;  /* leather accent, CTAs            */
  --aljild-deep-espresso:  #2C1D11;  /* cards, borders, box liners      */
  --aljild-warm-parchment: #F9F6F0;  /* soft ground, never #FFFFFF      */
  --aljild-antique-brass:  #C5A059;  /* trust marks, foil, accents      */

  --aljild-espresso-border: #3D2B1D;
  --aljild-parchment-muted: #E2DDD5;  /* print/packaging only — see below */
  --aljild-charcoal-muted:  #242424;

  /* ---- screen neutrals: cool grey family (hue 210, 8% saturation) ----
     Measured decision. The catalogue photographs are near-greyscale — sampled
     saturations of 5, 1, 12, 14, 37 and 0 per cent. A 43%-saturated warm cream
     ground was more colourful than everything standing on it, which is what
     made the page read as a template.
     Cool neutrals put the only warmth on screen in the leather itself and in
     the saddle-tan accent. Warm Parchment stays defined because packaging and
     print still specify it — that is a physical stock, not a screen colour. */
  --aljild-stone:       #F1F2F3;  /* page ground        */
  --aljild-stone-band:  #E6E8EA;  /* tonal band         */
  --aljild-stone-line:  #D8DBDE;  /* hairline           */

  /* ---- semantic, so components never reach for a raw palette value ----
     Ground roles, v2.1: Parchment is the page. Obsidian is an anchor band —
     header, footer, announcement bar, and one editorial band per page.
     Brown leather on a near-black ground loses its grain and its silhouette,
     which are the two things being sold. */
  /* ONE GROUND, header to footer. The dark bar was the strongest visual seam
     on the page; obsidian now survives only as the full-bleed editorial band.
     Body copy is full-strength #121212 — no greys for running text. */
  --page-bg:        var(--aljild-stone);
  --page-fg:        var(--aljild-obsidian);
  --surface:        var(--aljild-stone);  /* deprecated: there are no cards */
  --surface-alt:    var(--aljild-stone-band);
  --border:         var(--aljild-stone-line);  /* hairline, ~6 uses per page */
  --accent:         var(--aljild-saddle-tan);       /* borders and underlines, never fills */
  --accent-fg:      var(--aljild-warm-parchment);
  --trust:          var(--aljild-antique-brass);    /* provenance marks only, never body text */

  /* Genuine meta only. Full-strength ink at reduced opacity beats a grey. */
  --ink-meta: color-mix(in srgb, var(--aljild-obsidian) 62%, var(--page-bg));

  /* No boxes. */
  --radius: 0;
  --shadow: none;

  /* The surface every product photograph sits on. Shoot on this, place on
     this — one value, so the photo and the page cannot drift apart. */
  --plate:          var(--aljild-stone);

  /* ---- type (WM-01-B stack) ---- */
  /* Display is a serif: the editorial warmth of the reference comes from
     stroke contrast and a small x-height, which a geometric sans cannot give.
     Jost stays for micro-labels, nav and buttons — see --font-label. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-label:   "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar:      "Reem Kufi", "Noto Sans Arabic", sans-serif;
  --font-ar-body: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* ---- type scale ----
     Sizes, space and measures are GENERATED into scale.css, which loads before
     this file. Redefining any --step-* or --space-* here silently overrides the
     fluid values, because this file wins on order. Leading and tracking are not
     generated, so they live here. */
  --leading-body:  1.55;
  --leading-tight: 1.15;
  --leading-prose: 1.6;

  --content-max: 1180px;

  /* Latin display is tracked wide; see §3.3. Arabic never is. */
  --track-display: 0.18em;
  --track-label:   0.12em;

}

/* Anchor band. Apply to a section, never to the page — a dark page is the
   thing v2.1 moved away from. Redefines tokens rather than setting colours
   directly, so anything inside inherits a consistent set.

   Use on: header, footer, announcement bar, and ONE editorial band per page
   (the craft / macro-grain section). Three or more and the page reads dark
   again. */
.aljild-dark {
  --page-bg:     var(--aljild-obsidian);
  --page-fg:     var(--aljild-warm-parchment);
  --surface:     var(--aljild-deep-espresso);
  --surface-alt: var(--aljild-charcoal-muted);
  --border:      var(--aljild-espresso-border);
  --accent-fg:   var(--aljild-warm-parchment);

  background: var(--page-bg);
  color: var(--page-fg);
}

/* Announcement bar sits a step warmer than the header so the two dark strips
   at the top of the page read as two things, not one thick slab. */
.aljild-bar {
  --page-bg: var(--aljild-deep-espresso);
  --page-fg: var(--aljild-antique-brass);

  background: var(--page-bg);
  color: var(--page-fg);
}

/* Product plate. The photograph's own background is this colour, so the image
   dissolves into the panel instead of sitting in a visible box. */
.aljild-plate {
  background: var(--plate);
}

body {
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.label,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Wordmark and other display caps. Only ever applied to Latin. */
.lockup-latin {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-display);
  /* tracking adds space after the last letter; pull the block back level */
  text-indent: var(--track-display);
}

/* Digits line up in tables, prices and spec rows. */
.tabular,
td,
.price {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   Bilingual rules — §2.2. Removing any of these breaks Arabic.
   ========================================================================== */

:lang(ar),
[dir="rtl"] {
  font-family: var(--font-ar-body);

  /* Arabic ascenders and descenders need more room than Latin. */
  line-height: 1.7;

  /* Letter-spacing severs connected script. Never track Arabic — this
     overrides any inherited tracking from a Latin utility class. */
  letter-spacing: normal;
}

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) .display,
[dir="rtl"] .display {
  font-family: var(--font-ar);
  line-height: 1.35;
  letter-spacing: normal;
}

/* Arabic renders visually smaller than Latin at the same size. Nudge it up
   wherever the two sit inline together. */
:lang(ar) {
  font-size: 1.08em;
}

/* Western digits in both languages — §2.3. Latin numerals inside an Arabic
   run keep their own face so they do not pick up Arabic-Indic glyphs. */
:lang(ar) .num,
[dir="rtl"] .num {
  font-family: var(--font-mono);
  font-size: 0.926em; /* undoes the 1.08 bump so digits match Latin runs */
  direction: ltr;
  unicode-bidi: isolate;
}


/* ==========================================================================
   Trust badges
   ========================================================================== */

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--trust);
}

.trust-badge svg {
  width: 28px;
  height: 28px;
  flex: none;
  /* strokes are defined at a 24 grid; keep them crisp when scaled */
  vector-effect: non-scaling-stroke;
}

.trust-badge .trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.trust-badge .trust-ar {
  font-family: var(--font-ar-body);
  font-size: var(--step-0);
  color: var(--page-fg);
}

.trust-badge .trust-en {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--trust);
}


/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}