/* DABB 2 — design tokens. The ONLY place where raw colours, font names and sizes live.  (How to use them: THEME2.md)

   dabb2 has ONE theme; it is defined on :root and does not depend on html[data-theme]
   (the attribute is kept, always "night", so that old selectors and scripts keep working — see src/parts/_head.html, js/core.js).

   THE LOOK (DESIGN2.md and its amendments): Bricolage Grotesque at medium weight · hairlines · pills — on SAND. Under every page lies one
   sand (css/base.css → body: assets/ground/sand-tile.jpg, a seamless square from DABB.Sand.tile, exported by
   _lab/ground-tile.html). Nothing is dark by paint: what looks dark is SHADE — a transparent layer over the sand,
   rgba(var(--shade-rgb), α), α = the hour.
   AMENDMENT 7 (2026-10-16) — LIGHTER. Several people found the site and the nafūd dark, so dabb2 now reads as SAND IN
   DAYLIGHT, with shade only where shade helps. The sand itself is lighter (its ramp's lower steps rose; a shadow on it is a
   cooler, lighter sand), every hour dropped clearly, and THE TYPE KEEPS ITS CONTRAST BY ITSELF — one rule per section:
     IN SHADE   white type. The section's hour is light; behind every block of white type that the sand under it cannot
                carry lies a SOFT LOCAL SHADE (--shade-word under running text, --shade-title under large type only),
                feathered out over --shade-feather so that it never reads as a box (base.css: .lee / the parts' own blocks).
     IN THE SUN deep type (class .in-sun on the section, base.css): the sand bare, lifted a little by the sun
                (--sun-lift of --sun-rgb), the type in deep umber (--sun-ink …), Najd green deep for green words.
     Never both inside one block. Every text measured against the LIGHTEST grain behind it (white) or the DARKEST (deep).
   Hours:  --shade-sun 0 (in the sun) · --shade-day .06 (open ground) · --shade-dusk .24 · --shade-night .30 (the default
           of .sec; where the first screen ends) · --shade-deep .36 (the menu over the page: .54)  (before: .18 · .55 · .62 · .66)
   Today every part after the first screen stands in the sun (base.css lists them); the first screen, the top bar, the
   menu and the about page stand in shade.
   THE OWNER'S PHOTOGRAPHS (2026-10-18): the sand is now the warm apricot-orange of Najd's red sand in daylight, LIGHTER —
   sampled from his two pictures (_lab/sand-sample.html) and re-made into the painter's ramp (--sand-deep … --sand-high below).
   THE NEUTRALS are the sand in shade — for what must be OPAQUE (an input, a pressed chip, a picture's placeholder), never
   for a section:   page --bg #8D633E (the tile's mean, #DC9A60, under .38 of shade)   raised --bg-2 #956941   panel --bg-3 #996B43
   (white on them 5.3 · 4.8 · 4.6 : 1)   a hole --n-950 #110B06   INK (type on a white pill) --dabb-ink #21170E
   Type in shade: --fg white · --fg-2 #F2ECE4 · --fg-3 #E2D8CB (large type and marks) · --rule white 22 %.
   Measured on the LIGHTEST grain of the tile (2026-10-20), rgb(233, 176, 109), under --shade-word (.48): white 5.77 : 1 ·
   --fg-2 4.91 · --green-light 4.87 — under --shade-title (.28): white 3.51 (large type). (2026-10-18 the sand of the owner's
   photographs: lighter and more orange, its green — which weighs most in luminance — where it was. 2026-10-20 THE RIPPLES of his
   photograph of sand (js/dhub/sand.js, _lab/ripples/): gentler, a thin bright line on each crest; the tile re-exported — its
   lightest grain darker (was rgb(243, 179, 118)), its darkest lighter (was rgb(208, 138, 87)), its mean the same within one step.)
   Type in the sun (on the DARKEST grain, rgb(210, 140, 88), lifted .12): --sun-ink #1E140C 7.14 · --sun-ink-2 #33241A 5.89 ·
   --sun-ink-3 #4A3626 4.49 (large type and marks) · --green-deep 6.23.

   LIGHT = THE SHADE LIFTING, so that the sand shows in its own colour. The --warm-* tokens are that light — a tone of
   lit sand, never a yellow glow:
     --warm          #EDB474 — lit sand                 --warm-rgb  237, 180, 116 — for your own alpha: rgba(var(--warm-rgb), 0.10)
     --warm-glow     the same at .16: a line or a small place where the shade lifts a little       --warm-glow-2  its reach (.06)
     --warm-pool     a ready soft radial gradient:  background: var(--warm-pool);
   DABB YELLOW (--dabb-yellow) is left for three things only: the dabb's own gold, the focus ring (--focus) and ONE small
   dot (--accent-mark of the brand). Never a yellow field, never yellow type, never a yellow button, never a yellow glow.
   NAJD GREEN (DESIGN2.md, amendment 4) — the green of the plants, as DABB.Flora draws the rimth and the thumam: a calm
   sage. GREEN IS LIFE AND GROWTH, where yellow is the sun: the "Live" state of a product (its dot and word), a thing
   that has grown, the end of a reading trail, a success. Never a green field, never a green headline, never bright
   "eco" green, never the WhatsApp green (--wa stays for WhatsApp controls alone).
     --green        #6F8B6A — the identity green: a mark on white or on ink, a large mark (3 : 1 on --bg; not for text on shade)
     --green-light  #E6EFDC — ON SHADE: text, a dot, a thin rule — on --shade-word 4.9 : 1 on the lightest grain (brightened
                    with the whites: was #CFDDBD)
     --green-deep   #18261A — ON BARE SAND (in the sun): text — 6.2 : 1 on the darkest grain lifted .12, 6.6 on the tile's mean
     --green-text   the green for words and dots ON THIS GROUND: --green-light in shade, --green-deep in the sun (base.css)
     --green-light-rgb  230, 239, 220 — for your own alpha

   ACCENTS: [data-accent="brand|games|ai|apps|web|ux"] on a section, and on <html> for the ACTIVE section.
     The five service colours stay for the dabbs' skins and for SMALL MARKS only (--accent-mark, --accent-text):
     no coloured grounds — --accent-field is a dark surface in every accent.                                              */

:root {
  /* ── 1 · Raw palette ───────────────────────────────────────────────────────── */
  --dabb-yellow:        #FFC61A;  /* Dabb Yellow · أصفر الضب — light only (see --warm) */
  --dabb-yellow-hover:  #F5B900;
  --dabb-yellow-press:  #E8AC00;
  --dabb-yellow-wash:   #FFEFC3;
  --dabb-ochre:         #986C20;
  --dabb-ink:           #21170E;  /* INK: type on a white pill, on the chat panel — a deep umber */
  --dabb-white:         #FFFFFF;

  /* one neutral family: sand in shade — warm umber, the tones the shaded sand really gives (never grey, never orange) */
  --n-950: #110B06;  /* deeper than the page: a hole, a pit, a door */
  --n-900: #956941;  /* raised: the sand under a light shade (.34; white 4.8 : 1 on it)  — was #916942 (before AMENDMENT 7 #593E24) */
  --n-800: #996B43;  /* panel: the lightest opaque fill white still reads on (.32; 4.6 : 1) — was #966C44 (#644628) */
  --n-700: #78593B;
  --n-600: #6A5646;
  --n-500: #8B7867;
  --n-400: #AB9D8E;
  --n-300: #D4CABE;
  --n-200: #E8E1D8;
  --n-100: #F2EDE7;
  --n-50:  #FAF7F3;

  /* THE GROUND. The sand's own colours (= DABB.Sand.RAMP, js/dhub/sand.js: deep shadow · shade · the sand · lit · highlight).
     2026-10-18, THE OWNER'S PHOTOGRAPHS OF NAJD (_ref/owner-35-nafud-photo.jpg, owner-36-tuus-photo.jpg, sampled by
     _lab/sand-sample.html: lit backs #E99E4B · the general tone #CF8443 · shaded faces #9E5A38 · the shadow under a crest #824A33):
     the warm apricot-orange of the photographs, lifted into a lighter sand; the lower steps redder and cooler, as a shaded
     face of that sand is — never umber, never grey. (AMENDMENT 7: #99786A · #B48159 · #C38B52 · #DEAF74 · #F2D3A2; before it
     #3F2414 · #7B4A29 · #BD8147 · #DCAC70 · #F2D3A2.) */
  --sand-deep: #B5694B;   /* = DABB.Sand.RAMP[0] (the painter is the source) */
  --sand-shade: #CB8256;
  --sand: #DD9B5E;
  --sand-lit: #EDB474;
  --sand-high: #F8CB90;
  --sand-face: #AD6142;                  /* = DABB.Sand.FACE[0]: a dune's slip face just under its brink — the same sand, deeper and cooler-red … */
  --sand-face-foot: #CF855C;             /* … = FACE[1]: lighter towards its foot, where the lit floor throws light back into it */
  --sand-sky: #BF7A60;                   /* = DABB.Sand.SKY: sand that only the sky lights (a crest's short shadow at the foot of its face) */
  --sand-hole: #66402F;                  /* = DABB.Sand.HOLE: the inside of a dug opening, what is pressed into the sand (was #5E4535) */
  --sand-mean: #DC9A60;                  /* the mean of the tile (was #C48E57; before AMENDMENT 7 #B67E48): it lies under the shade until the picture has come — nothing flashes. Re-measured 2026-10-20 on the tile of the new ripples: rgb(220.98, 154.53, 94.91) — within one step of this in every channel (tools/kit.py allows one), mean luminance .395 as before: kept */
  --ground-size: 1280px;                 /* assets/ground/sand-tile.jpg, one pixel per CSS px */
  /* … and the shade over it: one dark, slightly warm tone at a transparency. α is the hour. */
  --shade-rgb: 12, 9, 6;
  --shade-sun: 0;                        /* IN THE SUN: no shade at all (the section's type is deep: .in-sun, base.css) */
  --shade-day: 0.06;                     /* open ground in daylight (was .18) */
  --shade-dusk: 0.24;                    /* (was .55) */
  --shade-night: 0.3;                    /* the default of a section in shade, and where the first screen ends (01-hero reads it) (was .62) */
  --shade-deep: 0.36;                    /* the deepest hour of a section in shade (was .66); the menu over the page: .54 */
  --shade-ease: clamp(120px, 16vw, 240px);   /* the height over which one hour turns into the next at the top (and, with --sh-out, the bottom) of a section */
  /* the SOFT LOCAL SHADE under a block of white type where the sand cannot carry it (in shade sections) — never a box:
     it is feathered out over --shade-feather. Measured on the lightest grain of the tile, rgb(233, 176, 109) (2026-10-20): */
  --shade-word: 0.48;                    /* under running text: white 5.8 : 1 · --fg-2 4.9 · --green-light 4.9 */
  --shade-title: 0.28;                   /* under large type only (≥ 24 px, or 19 px bold): white 3.5 : 1 */
  --shade-feather: clamp(36px, 5vw, 72px);
  /* IN THE SUN: the sand lifted a little by the light (a wash of its own highlight), and deep type */
  --sun-rgb: 248, 203, 144;              /* = --sand-high (was 242, 211, 162) */
  --sun-lift: 0.12;
  --sun-ink: #1E140C;                    /* 7.14 : 1 on the darkest grain, lifted */
  --sun-ink-2: #33241A;                  /* 5.89 : 1 */
  --sun-ink-3: #4A3626;                  /* 4.49 : 1 — large type and marks only */
  --sun-ink-rgb: 30, 20, 12;
  --sun-paper: #DFA066;                  /* (was #CA9660) the tile's mean under the sun's lift: the "paper" of an engraved plate drawn in ink on sand in the sun (--plate-paper) */

  /* light = the shade lifting: a tone of lit sand (never a yellow glow) */
  --warm: var(--sand-lit);
  --warm-rgb: 237, 180, 116;
  --warm-glow: rgba(237, 180, 116, 0.16);
  --warm-glow-2: rgba(237, 180, 116, 0.06);
  --warm-pool: radial-gradient(closest-side, var(--warm-glow) 0%, var(--warm-glow-2) 55%, rgba(237, 180, 116, 0) 100%);

  /* Nafud · نَفود — Games (red sand at last light) */
  --nafud:                   #F57760;
  --nafud-hover:             #FF8D77;
  --nafud-strong:            #B44C39;
  --nafud-deep:              #62291F;
  --nafud-tint:              #FFEBE7;
  --nafud-bright:            #EC7E69;
  --nafud-pale:              #FEC0B2;
  --nafud-skin:              #C37F61;
  --nafud-skin-shade:        #865139;
  --nafud-skin-light:        #EDBAA5;
  --nafud-skin-night:        #DB997C;
  --nafud-skin-night-shade:  #A0684F;
  --nafud-skin-night-light:  #FFD8C7;

  /* Sahar · سَحَر — AI (the hour before dawn) */
  --sahar:                   #7C76D8;
  --sahar-hover:             #8A85E9;
  --sahar-strong:            #655CC3;
  --sahar-deep:              #201C45;
  --sahar-tint:              #EEEFFF;
  --sahar-bright:            #8580E0;
  --sahar-pale:              #CBCBFF;
  --sahar-skin:              #494F76;
  --sahar-skin-shade:        #1F2341;
  --sahar-skin-light:        #7B819F;
  --sahar-skin-night:        #70789F;
  --sahar-skin-night-shade:  #424868;
  --sahar-skin-night-light:  #A6ACC9;

  /* Fayruz · فَيروز — Apps (Philby's dhub in turquoise) */
  --fayruz:                   #14B9B2;
  --fayruz-hover:             #35C9C2;
  --fayruz-strong:            #007974;
  --fayruz-deep:              #00403D;
  --fayruz-tint:              #DDF6F4;
  --fayruz-bright:            #14B9B2;
  --fayruz-pale:              #96E1DC;
  --fayruz-skin:              #509B98;
  --fayruz-skin-shade:        #276664;
  --fayruz-skin-light:        #9ACCCA;
  --fayruz-skin-night:        #73BAB6;
  --fayruz-skin-night-shade:  #468481;
  --fayruz-skin-night-light:  #BDECEA;

  /* Talh · طَلْح — Web & Platforms (acacia leaf) */
  --talh:                   #6D8C09;
  --talh-hover:             #7C9C26;
  --talh-strong:            #344500;
  --talh-deep:              #182200;
  --talh-tint:              #ECF3E1;
  --talh-bright:            #779625;
  --talh-pale:              #C7DAA4;
  --talh-skin:              #5F6A29;
  --talh-skin-shade:        #323A00;
  --talh-skin-light:        #919B6F;
  --talh-skin-night:        #7C874A;
  --talh-skin-night-shade:  #4C5520;
  --talh-skin-night-light:  #B0BA90;

  /* the brand animal: the warm-phase dhub (yellow body, dark head) */
  --dabb-skin:               #E0B856;
  --dabb-skin-shade:         #AA822F;
  --dabb-skin-light:         #F1DDA5;
  --dabb-skin-head:          #3F3729;
  --dabb-skin-night:         #EEC55E;
  --dabb-skin-night-shade:   #BB913A;
  --dabb-skin-night-light:   #F9E7B3;

  /* Kuhl · كُحل — UX. The fifth dabb is the animal's own cold phase; on the dark page its mark is a pale grey. */
  --kuhl: #DDDFE3; --kuhl-hover: #FFFFFF; --kuhl-strong: #BBBDC1; --kuhl-deep: #644628; --kuhl-tint: #EEEFF2; --kuhl-bright: #DDDFE3; --kuhl-pale: #C9CBD0;
  --kuhl-skin: #50504A; --kuhl-skin-shade: #363632; --kuhl-skin-light: #6A6A64;
  --kuhl-skin-night: #8A8A84; --kuhl-skin-night-shade: #5F5F5A; --kuhl-skin-night-light: #B0B0AA;
  --ux: var(--kuhl);

  /* WhatsApp — its green, toned down */
  --wa: #197E44; --wa-hover: #14693A; --on-wa: #FFFFFF;

  /* Najd green · أخضر نجد — the plants' own (the rimth's jointed stems, the thumam's blades): life and growth. See the head of this file */
  --green: #6F8B6A;
  --green-light: #E6EFDC; --green-light-rgb: 230, 239, 220;     /* (brightened with the whites, AMENDMENT 7: was #CFDDBD) */
  --green-deep: #18261A;

  /* short aliases used across the CSS */
  --yellow: var(--dabb-yellow);
  --yellow-deep: var(--dabb-yellow-press);
  --yellow-tint: var(--dabb-yellow-wash);
  --ochre: var(--dabb-ochre);
  --ink: var(--dabb-ink);
  --ink-2: var(--n-900);
  --ink-3: var(--n-800);
  --paper: var(--dabb-white);
  --grey-1: var(--n-100); --grey-2: var(--n-200); --grey-3: var(--n-300); --grey-4: var(--n-500); --grey-5: var(--n-600);
  --games: var(--nafud); --ai: var(--sahar); --apps: var(--fayruz); --web: var(--talh);

  /* ── 2 · Type ──
     Latin: Bricolage Grotesque (400 / 500 / 600; the owner's choice, 2026-10-20 — it replaced Manrope) for display AND text —
     display at 500, a little tracking off, large but calm. Its optical size follows the type size (font-optical-sizing: auto,
     opsz 12–96): the headlines take the tight display cut, the text the open text cut. No italic: none is set.
     Arabic: IBM Plex Sans Arabic for text, and for display at 600. Mono labels: JetBrains Mono, uppercase, spaced.
     Latin face FIRST in every stack: Latin words and digits inside Arabic come from Bricolage Grotesque (it has no Arabic:
     every Arabic letter is IBM Plex Sans Arabic's). */
  --f-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Bricolage Grotesque", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "IBM Plex Sans Arabic", ui-monospace, "SF Mono", Menlo, monospace;
  --display-stretch: 100%;      /* (the first site's wide Archivo is gone: these two stay at 100 % for old code) */
  --sub-stretch: 100%;
  --w-display: 500;
  --w-h2: 500;
  --w-h3: 600;
  --w-strong: 600;
  --w-text: 400;

  /* sizes — fluid 390 → 1440 px, fixed outside */
  --fs-mega: clamp(3.5rem, 0.9rem + 10.667vw, 10.5rem);          /* 56 → 168  one word, a number */
  --fs-hero: clamp(2.5rem, 1.386rem + 4.571vw, 5.5rem);          /* 40 → 88   the hero sentence */
  --fs-h1: clamp(2.125rem, 1.429rem + 2.857vw, 4rem);            /* 34 → 64   section titles */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem);            /* 26 → 40 */
  --fs-h3: clamp(1.1875rem, 1.071rem + 0.476vw, 1.5rem);         /* 19 → 24 */
  --fs-lead: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem);      /* 17 → 20 */
  --fs-body: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);         /* 16 → 17 */
  --fs-sm: 0.875rem;                                             /* 14 */
  --fs-xs: clamp(0.6875rem, 0.664rem + 0.095vw, 0.75rem);        /* 11 → 12   mono labels */
  --lh-mega: 0.96;
  --lh-hero: 1.04;
  --lh-head: 1.08;
  --lh-h2: 1.14;
  --lh-snug: 1.25;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-sm: 1.5;
  --tr-mega: -0.022em;           /* (Bricolage's display cut is already set close: about half of what wide Manrope took, -0.04 / -0.035 / -0.028 / -0.018) */
  --tr-head: -0.02em;
  --tr-h2: -0.016em;
  --tr-h3: -0.008em;
  --tr-label: 0.12em;

  /* ── 3 · Space ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --margin: clamp(20px, 5vw, 80px);          /* page side padding */
  --gutter: clamp(16px, 2vw, 32px);
  --sec-pad: clamp(88px, 12vw, 200px);       /* vertical breathing room of a section */
  --maxw: 1520px;
  --band-h: 10px;                            /* the trackway at the very top (finer than the first site's) */
  --header-h: 68px;
  --rail-w: 0px;                             /* retired, kept at 0 for old code */

  /* ── 4 · Shape: pills for buttons and chips; everything else stays near-square ── */
  --r-0: 0px; --r-1: 3px; --r-2: 10px; --r-pill: 999px;
  --hair: 1px;
  --line: 1.5px;

  /* ── 5 · Motion: dash, then freeze ── */
  --e-dash: cubic-bezier(0.16, 1, 0.3, 1);
  --e-std: cubic-bezier(0.4, 0, 0.2, 1);
  --e-in: cubic-bezier(0.7, 0, 0.84, 0);
  --t-1: 140ms; --t-2: 280ms; --t-3: 560ms; --t-4: 900ms; --t-5: 1400ms;

  /* ── 6 · Layers ── */
  --z-rail: 40; --z-header: 50; --z-band: 60; --z-index: 70; --z-sheet: 80; --z-intro: 100;

  /* ── 7 · THE ONE THEME — the role tokens ── */
  color-scheme: dark;
  --bg: #8D633E;                     /* the page's own tone: the sand's mean under .38 of shade (was #8A633D; before AMENDMENT 7 #4D351F) — an OPAQUE fill (and what shows before any picture); a section is a SHADE, see .sec. White on it 5.3 : 1 */
  --bg-2: var(--n-900);              /* raised              #956941 (white 4.8) */
  --bg-3: var(--n-800);              /* panel               #996B43 (white 4.6) */
  --fg: var(--dabb-white);           /* type */
  --fg-2: #F2ECE4;                   /* secondary type — a warm white, about 94 % (solid: scripts and canvases read it): 4.9 : 1 on the lightest grain under --shade-word (was #E6DED3) */
  --fg-3: #E2D8CB;                   /* tertiary type — about 87 %: large type and marks only on a light ground; small text under --shade-deep … .52 (was #CDC2B4) */
  --green-text: var(--green-light);  /* the green of a word or a dot on this ground (in the sun: --green-deep) */
  --rule: rgba(255, 255, 255, 0.22);     /* hairlines */
  --rule-2: rgba(255, 255, 255, 0.5);    /* control borders, strong hairlines */
  --field: var(--bg);                /* what was the big yellow field: in dabb2 it is open SAND under the day shade (08-contact); as a fill, the page's dark */
  --on-field: var(--fg);
  --on-field-2: var(--fg-2);
  --field-rule: var(--rule);
  --block: var(--dabb-white);        /* the inverse block: white with ink type (a pill, the skip link) — never a whole section */
  --on-block: var(--dabb-ink);
  --block-hover: var(--n-200);
  --btn: var(--dabb-white);          /* primary button: a white pill, ink label */
  --on-btn: var(--dabb-ink);
  --btn-hover: var(--n-200);
  --link-rule: rgba(255, 255, 255, 0.4);
  --link-hover-bg: transparent;
  --link-hover-fg: var(--fg);
  --focus: var(--dabb-yellow);       /* the focus ring is Dabb Yellow, on every ground */
  --focus-gap: var(--dabb-ink);
  --chrome: #8D633E;                 /* the browser's own bar (meta theme-color): the page's own tone (was #8A633D) */
  --shadow: rgba(12, 9, 6, 0.5);

  /* ── 8 · default accent = the brand itself (white; its one small mark is the warm dot) ── */
  --accent: var(--dabb-white);
  --on-accent: var(--dabb-ink);
  --accent-hover: var(--n-200);
  --accent-press: var(--n-300);
  --on-accent-press: var(--dabb-ink);
  --accent-mark: var(--dabb-yellow);         /* the ONE small dot (Dabb Yellow) — a dot, a 2 px rule, nothing larger */
  --accent-text: var(--dabb-white);          /* the accent as TEXT / icon / thin rule on the page */
  --accent-field: var(--bg);                 /* a large field "in the accent": always a dark surface in dabb2 */
  --on-accent-field: var(--dabb-white);
  --accent-eyebrow: var(--fg-2);
  --accent-panel: var(--bg-2);               /* the quiet panel beside it */
  --accent-deep: var(--bg-2);
  --accent-tint: var(--bg-3);
  --accent-pale: var(--fg-2);
  --skin: var(--dabb-skin-night); --skin-shade: var(--dabb-skin-night-shade); --skin-light: var(--dabb-skin-night-light); --skin-head: var(--dabb-skin-head);
}

@media (min-width: 1200px) { :root { --header-h: 76px; } }

/* Arabic: IBM Plex Sans Arabic carries the display at 600. Text 6 % larger (Plex Arabic is small on the body),
   much more leading, never any letter-spacing. Same font stacks. */
html[lang="ar"] {
  --w-display: 600;
  --w-h2: 600;
  --w-h3: 600;
  --fs-mega: clamp(3.5rem, 0.993rem + 10.286vw, 10.25rem);       /* 56 → 164 */
  --fs-hero: clamp(2.375rem, 1.354rem + 4.19vw, 5.125rem);       /* 38 → 82 */
  --fs-h1: clamp(2rem, 1.35rem + 2.667vw, 3.75rem);              /* 32 → 60 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem);            /* 26 → 40 */
  --fs-h3: clamp(1.25rem, 1.134rem + 0.476vw, 1.5625rem);        /* 20 → 25 */
  --fs-lead: clamp(1.125rem, 1.055rem + 0.286vw, 1.3125rem);     /* 18 → 21 */
  --fs-body: clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem);     /* 17 → 18 */
  --fs-sm: 0.9375rem;                                            /* 15 */
  --fs-xs: clamp(0.8125rem, 0.789rem + 0.095vw, 0.875rem);       /* 13 → 14 */
  --lh-mega: 1.25;
  --lh-hero: 1.3;
  --lh-head: 1.36;
  --lh-h2: 1.42;
  --lh-snug: 1.5;
  --lh-lead: 1.75;
  --lh-body: 1.9;
  --lh-sm: 1.8;
  --tr-mega: 0;
  --tr-head: 0;
  --tr-h2: 0;
  --tr-h3: 0;
  --tr-label: 0;
}

/* ── section accents ──────────────────────────────────────────────────────────
   --accent            vivid fill for SMALL things (a tag, a 2 px rule, a mark) — label in --on-accent
   --accent-mark       the dot / the scale of this accent (brand: the warm dot)
   --accent-text       the section colour as text / icon / thin rule on the dark (the bright value)
   --accent-field      a large field of the section: a DARK surface in every accent (no coloured grounds in dabb2)
   --on-accent-field   type on that field (white)      --accent-eyebrow  small label on that field (the pale tone)
   --accent-panel      the quiet panel beside it       --accent-deep     the deep tone (kept for a builder who needs a tinted edge)
   --skin / --skin-shade / --skin-light / --skin-head   the animal in this accent's colour (the engine's night skins)     */
[data-accent="brand"] {
  --accent: var(--dabb-white); --on-accent: var(--dabb-ink); --accent-hover: var(--n-200); --accent-press: var(--n-300); --on-accent-press: var(--dabb-ink);
  --accent-mark: var(--dabb-yellow); --accent-text: var(--dabb-white); --accent-field: var(--bg); --on-accent-field: var(--dabb-white); --accent-eyebrow: var(--fg-2); --accent-panel: var(--bg-2);
  --accent-deep: var(--bg-2); --accent-tint: var(--bg-3); --accent-pale: var(--fg-2);
  --skin: var(--dabb-skin-night); --skin-shade: var(--dabb-skin-night-shade); --skin-light: var(--dabb-skin-night-light); --skin-head: var(--dabb-skin-head);
}
[data-accent="games"] {   /* Nafud · نَفود — red sand at last light */
  --accent: var(--nafud); --on-accent: var(--dabb-ink); --accent-hover: var(--nafud-hover); --accent-press: var(--nafud-strong); --on-accent-press: var(--dabb-white);
  --accent-mark: var(--nafud); --accent-text: var(--nafud-bright); --accent-field: var(--bg-2); --on-accent-field: var(--dabb-white); --accent-eyebrow: var(--nafud-pale); --accent-panel: var(--bg-3);
  --accent-deep: var(--nafud-deep); --accent-tint: var(--nafud-tint); --accent-pale: var(--nafud-pale);
  --skin: var(--nafud-skin-night); --skin-shade: var(--nafud-skin-night-shade); --skin-light: var(--nafud-skin-night-light); --skin-head: var(--nafud-skin-night-shade);
}
[data-accent="ai"] {   /* Sahar · سَحَر — the hour before dawn */
  --accent: var(--sahar); --on-accent: var(--dabb-ink); --accent-hover: var(--sahar-hover); --accent-press: var(--sahar-strong); --on-accent-press: var(--dabb-white);
  --accent-mark: var(--sahar-bright); --accent-text: var(--sahar-bright); --accent-field: var(--bg-2); --on-accent-field: var(--dabb-white); --accent-eyebrow: var(--sahar-pale); --accent-panel: var(--bg-3);
  --accent-deep: var(--sahar-deep); --accent-tint: var(--sahar-tint); --accent-pale: var(--sahar-pale);
  --skin: var(--sahar-skin-night); --skin-shade: var(--sahar-skin-night-shade); --skin-light: var(--sahar-skin-night-light); --skin-head: var(--sahar-skin-night-shade);
}
[data-accent="apps"] {   /* Fayruz · فَيروز — Philby's dabb in turquoise */
  --accent: var(--fayruz); --on-accent: var(--dabb-ink); --accent-hover: var(--fayruz-hover); --accent-press: var(--fayruz-strong); --on-accent-press: var(--dabb-white);
  --accent-mark: var(--fayruz); --accent-text: var(--fayruz-bright); --accent-field: var(--bg-2); --on-accent-field: var(--dabb-white); --accent-eyebrow: var(--fayruz-pale); --accent-panel: var(--bg-3);
  --accent-deep: var(--fayruz-deep); --accent-tint: var(--fayruz-tint); --accent-pale: var(--fayruz-pale);
  --skin: var(--fayruz-skin-night); --skin-shade: var(--fayruz-skin-night-shade); --skin-light: var(--fayruz-skin-night-light); --skin-head: var(--fayruz-skin-night-shade);
}
[data-accent="web"] {   /* Talh · طَلْح — acacia leaf */
  --accent: var(--talh); --on-accent: var(--dabb-ink); --accent-hover: var(--talh-hover); --accent-press: var(--talh-strong); --on-accent-press: var(--dabb-white);
  --accent-mark: var(--talh-hover); --accent-text: var(--talh-hover); --accent-field: var(--bg-2); --on-accent-field: var(--dabb-white); --accent-eyebrow: var(--talh-pale); --accent-panel: var(--bg-3);
  --accent-deep: var(--talh-deep); --accent-tint: var(--talh-tint); --accent-pale: var(--talh-pale);
  --skin: var(--talh-skin-night); --skin-shade: var(--talh-skin-night-shade); --skin-light: var(--talh-skin-night-light); --skin-head: var(--talh-skin-night-shade);
}
[data-accent="ux"] {   /* Kuhl · كُحل — the cold-phase dabb: a pale grey mark on the dark */
  --accent: var(--kuhl); --on-accent: var(--dabb-ink); --accent-hover: var(--kuhl-hover); --accent-press: var(--kuhl-strong); --on-accent-press: var(--dabb-ink);
  --accent-mark: var(--kuhl); --accent-text: var(--dabb-white); --accent-field: var(--bg-2); --on-accent-field: var(--dabb-white); --accent-eyebrow: var(--kuhl-pale); --accent-panel: var(--bg-3);
  --accent-deep: var(--kuhl-deep); --accent-tint: var(--kuhl-tint); --accent-pale: var(--kuhl-pale);
  --skin: var(--kuhl-skin-night); --skin-shade: var(--kuhl-skin-night-shade); --skin-light: var(--kuhl-skin-night-light); --skin-head: var(--kuhl-skin-night-shade);
}