/* ==========================================================================
   STUDIO — tokens.css
   Design system primitives for the "Studio" theme.

   Direction: calm, crisp, premium-minimal commerce. The quiet, expensive
   sibling of Momentum.

   THE FIVE RULES THIS FILE ENCODES (do not break them on any page):
     1. NO GRADIENTS. Anywhere. Colour is flat or it is photography.
     2. Containment is done with HAIRLINES (1px), not drop shadows.
        Shadows exist only for things that genuinely float (drawer, modal,
        search panel) and are tight and low-opacity.
     3. Small radii. 8–12px. Never pillowy.
     4. Motion is 150–220ms, ease-out. No spring, no bounce, no float.
     5. Colour is rationed. White + one cool grey + charcoal ink.
        The red is a punctuation mark. The PHOTOGRAPHY supplies the colour.
   ========================================================================== */

/* ==========================================================================
   SULTAN NAHIA — the house Arabic face, self-hosted.
   This is the font bakkar-printing.com actually sets its Arabic in, so it is
   the DEFAULT for --font-ar. It is the only face in this theme that is not
   fetched from Google, which is also why it is the only one that works with
   the network off (and from file://).

   One weight ships. The `font-weight: 400 700` range tells the browser this
   single file covers the whole range, so a <strong> gets a SYNTHESISED bold
   instead of the browser hunting for a second file it will never find.
   The path is relative to THIS FILE (assets/css/ → assets/fonts/).
   ========================================================================== */
@font-face {
  font-family: 'Sultan Nahia';
  src: url('../fonts/SultanNahia.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------
     PALETTE — raw ramp
     A cool, near-neutral grey ramp. Kept desaturated so the product
     photography (which is very colourful) never has to fight the UI.
     --------------------------------------------------------------------- */
  --c-white:      #FFFFFF;
  --c-grey-25:    #FBFBFC;
  --c-grey-50:    #F6F7F8;  /* the surface. product tiles, section bands.   */
  --c-grey-100:   #F0F1F3;
  --c-grey-200:   #E6E8EB;  /* THE HAIRLINE. the workhorse of this theme.   */
  --c-grey-300:   #D3D7DC;  /* hairline, emphasised (hover / focus)         */
  --c-grey-400:   #A8AEB7;
  --c-grey-500:   #6B7280;  /* muted text. 4.83:1 on white — AA safe.       */
  --c-grey-600:   #4B5058;
  --c-grey-700:   #3D4149;  /* secondary text                               */
  --c-grey-900:   #1C1F25;
  --c-ink:        #111318;  /* the ink. 18.6:1 on white.                    */

  /* Brand red.
     --c-red is the BRAND value (#ED1C24) and is used for non-text things
     only — the accent dot, the active underline, a rule, a focus ring.
     Those need 3:1, and it clears that.
     White text on #ED1C24 is 4.38:1 — it FAILS AA for body-size text — so
     anything that carries white text uses --c-red-600 (5.12:1), and red
     text on white uses --c-red-700 (6.09:1). Same red family, legible. */
  --c-red:        #ED1C24;
  --c-red-600:    #D81B22;  /* button fill (white text = 5.12:1)  */
  --c-red-700:    #C41219;  /* button hover + red TEXT on white (6.09:1) */
  --c-red-800:    #A50F15;  /* button active */
  --c-red-50:     #FEF2F2;  /* the faintest red wash — chips only */

  --c-green-700:  #15803D;  /* form success */
  --c-amber-700:  #B45309;  /* form warning */

  /* The "Bakkar Red" chrome plate (the customiser's header / sidebar option).
     NOT --c-red: white on #ED1C24 is 4.38:1 and FAILS AA for the small nav
     labels that sit on it. #C41219 gives white 6.1:1 — same red family, and
     every label on it clears AA comfortably. Flat. No gradient. */
  --c-red-plate:  #C41219;
  --c-red-plate-2:#AC1016;   /* its pressed / recessed value */

  /* ---------------------------------------------------------------------
     SEMANTIC COLOUR
     --------------------------------------------------------------------- */
  --bg:              var(--c-white);
  --bg-surface:      var(--c-grey-50);   /* tiles + alternating bands */
  --bg-surface-2:    var(--c-grey-100);
  --bg-ink:          var(--c-ink);       /* the one dark band on the page */

  --text:            var(--c-ink);
  --text-secondary:  var(--c-grey-700);
  --text-muted:      var(--c-grey-500);
  --text-on-ink:     var(--c-white);
  --text-on-ink-mut: #9BA1AB;            /* 5.9:1 on #111318 */
  --text-accent:     var(--c-red-700);

  --border:          var(--c-grey-200);  /* THE hairline */
  --border-strong:   var(--c-grey-300);  /* hover / emphasis */
  --border-ink:      var(--c-ink);
  --border-on-ink:   #2A2E36;

  --accent:          var(--c-red);
  --accent-fill:     var(--c-red-600);
  --accent-fill-hov: var(--c-red-700);
  --accent-fill-act: var(--c-red-800);

  --focus:           var(--c-red);

  /* Overlay + control surfaces. Every one of these is redefined in the dark
     block — nothing downstream may hardcode a hex. */
  --bg-raised:       var(--c-white);   /* modal / dialog / dropdown panels */
  --bg-elevated:     var(--c-white);   /* the thumb of a segmented control */
  --backdrop:        rgba(17, 19, 24, 0.55);
  --backdrop-heavy:  rgba(9, 10, 13, 0.88);   /* the lightbox ground */
  --overlay-1:       rgba(17, 19, 24, 0.05);
  --overlay-2:       rgba(17, 19, 24, 0.09);

  --success:         var(--c-green-700);
  --success-border:  #A7D8B9;
  --accent-wash:     var(--c-red-50);       /* chip / check tint */
  --accent-wash-bd:  #F7C9CB;

  /* The quiet hover wash on a ruled cell (agent card, table row). */
  --bg-hover:        var(--c-grey-25);
  /* Things that live ON the ink band / footer. */
  --ink-hover:       var(--c-grey-900);
  --ink-active:      #000000;
  --on-ink-hover:    var(--c-grey-100);
  --border-on-ink-h: #6B7280;
  --bg-on-ink-h:     #1C1F25;
  --text-on-ink-faint: #8B919C;   /* 5.8:1 on the ink band. #6B7280 was 3.84 — it failed AA. */

  /* Media bed — what sits behind a `contain`ed photo (lightbox, gallery). */
  --media-bed:       var(--c-grey-50);
  /* A translucent plate laid ON a photograph (the hero caption). */
  --plate:           rgba(255, 255, 255, 0.94);

  color-scheme: light;

  /* ---------------------------------------------------------------------
     CHROME — the header and the drawer read ONLY these.
     They exist so the customiser's "Bakkar Red" option can repaint either
     surface (see the [data-header] / [data-sidebar] blocks below) without a
     single component knowing that the option exists. Light, dark and red are
     three values of the same twenty tokens.
     --------------------------------------------------------------------- */
  --hdr-bg:          var(--c-white);
  --hdr-line:        var(--c-grey-200);
  --hdr-fg:          var(--c-ink);          /* brand name, active nav */
  --hdr-fg-2:        var(--c-grey-700);     /* resting nav link */
  --hdr-fg-3:        var(--c-grey-500);     /* brand descriptor, icon rest */
  --hdr-mark:        var(--accent);         /* the active-nav underline */
  --hdr-hover-bg:    var(--c-grey-50);
  --hdr-hover-fg:    var(--c-ink);
  --hdr-btn-fg:      var(--c-grey-700);
  --hdr-btn-bg-h:    var(--c-grey-50);
  --hdr-btn-fg-h:    var(--c-ink);
  --hdr-seg-bg:      var(--c-grey-50);
  --hdr-seg-line:    var(--c-grey-200);
  --hdr-seg-fg:      var(--c-grey-500);
  --hdr-seg-fg-on:   var(--c-ink);
  --hdr-seg-thumb:   var(--c-white);
  --hdr-seg-thumb-bd:var(--c-grey-200);
  --hdr-cta-bg:      var(--accent-fill);
  --hdr-cta-bg-h:    var(--accent-fill-hov);
  --hdr-cta-fg:      var(--c-white);
  --hdr-focus:       var(--c-red);

  --dw-bg:           var(--c-white);
  --dw-line:         var(--c-grey-200);
  --dw-fg:           var(--c-ink);
  --dw-fg-2:         var(--c-grey-700);
  --dw-fg-3:         var(--c-grey-500);
  --dw-hover-fg:     var(--c-red-700);
  --dw-active-fg:    var(--c-red-700);
  --dw-btn-fg:       var(--c-grey-700);
  --dw-btn-bg-h:     var(--c-grey-50);
  --dw-seg-bg:       var(--c-grey-50);
  --dw-seg-line:     var(--c-grey-200);
  --dw-seg-fg:       var(--c-grey-500);
  --dw-seg-fg-on:    var(--c-ink);
  --dw-seg-thumb:    var(--c-white);
  --dw-seg-thumb-bd: var(--c-grey-200);
  --dw-cta-bg:       var(--accent-fill);
  --dw-cta-bg-h:     var(--accent-fill-hov);
  --dw-cta-fg:       var(--c-white);
  --dw-focus:        var(--c-red);

  /* ---------------------------------------------------------------------
     TYPE — a neo-grotesk, set tight and confident.
     Inter is the workhorse for Latin and it is NOT negotiable — it is the
     theme's voice.

     Arabic is a different question. The house face is SULTAN NAHIA (the one
     the real bakkar-printing.com sets its Arabic in — self-hosted, below),
     and the customiser's "Arabic font" picker can swap it for ten alternates.
     That swap happens on --font-ar and ONLY on --font-ar: see the
     `--f-*` stacks and the `:root[data-font=…]` blocks further down. Latin
     never moves.
     --------------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;
  --font-ar:   var(--f-cairo);   /* the default. re-pointed by [data-font]. */
  --font-body: var(--font-sans);
  --font-head: var(--font-sans);
  /* Tabular figures for stats/specs so numbers don't wobble. */
  --font-num:  var(--font-sans);

  /* The eleven Arabic stacks the picker can choose between. They live here,
     once, so the token override blocks AND the picker's own previews (which
     each render themselves in their own face) read the SAME string. Every one
     of them keeps a real fallback chain — a Google Font that never arrives
     must still land on something Arabic-capable. */
  --f-sultan:    'Sultan Nahia', 'Segoe UI', Tahoma, sans-serif;
  --f-cairo:     'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --f-tajawal:   'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --f-almarai:   'Almarai', 'Segoe UI', Tahoma, sans-serif;
  --f-plexar:    'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --f-notosans:  'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --f-notokufi:  'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
  --f-vazirmatn: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --f-changa:    'Changa', 'Segoe UI', Tahoma, sans-serif;
  --f-elmessiri: 'El Messiri', 'Segoe UI', Tahoma, sans-serif;
  --f-amiri:     'Amiri', 'Segoe UI', Tahoma, serif;

  /* Fluid scale. Restrained — big, but never shouty. */
  /* 36 → 64. Big, but RESTRAINED — the brief's words. 76px turned the hero
     into a poster and forced two-word lines; 64px reads as confident. */
  --fs-display: clamp(2.25rem, 1.5rem + 3.1vw, 4rem);       /* 36 → 64 */
  --fs-h1:      clamp(2.125rem, 1.35rem + 3.3vw, 3.75rem);  /* 34 → 60 */
  --fs-h2:      clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem);  /* 26 → 42 */
  --fs-h3:      clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);  /* 19 → 24 */
  --fs-h4:      clamp(1rem, 0.95rem + 0.25vw, 1.125rem);    /* 16 → 18 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);  /* 17 → 21 */
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;   /* 15 */
  --fs-xs:      0.8125rem;   /* 13 */
  --fs-label:   0.6875rem;   /* 11 — the uppercase meta label */

  --lh-tight:   1.05;
  --lh-head:    1.12;
  --lh-snug:    1.35;
  --lh-body:    1.6;
  --lh-relaxed: 1.7;

  /* Tracking. The signature of this theme: display type is set TIGHT. */
  --ls-display: -0.03em;
  --ls-head:    -0.02em;
  --ls-body:    -0.005em;
  --ls-label:   0.11em;   /* the small uppercase meta label */
  --ls-wide:    0.16em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------------------------------------------------------------------
     SPACE — a 4px base scale.
     --------------------------------------------------------------------- */
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-7:  2rem;      /* 32 */
  --sp-8:  2.5rem;    /* 40 */
  --sp-9:  3rem;      /* 48 */
  --sp-10: 4rem;      /* 64 */
  --sp-11: 5rem;      /* 80 */
  --sp-12: 6rem;      /* 96 */
  --sp-13: 8rem;      /* 128 */

  /* Section rhythm. Airy — this theme breathes. */
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* ---------------------------------------------------------------------
     GEOMETRY — small radii. crisp edges.
     --------------------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r:      8px;    /* buttons, inputs, chips */
  --r-md:   10px;   /* product tiles */
  --r-lg:   12px;   /* panels, modal. THE CEILING. */
  --r-pill: 999px;  /* pills only — never on a card */

  --hair: 1px;
  --border-1: var(--hair) solid var(--border);
  --border-1-strong: var(--hair) solid var(--border-strong);

  /* ---------------------------------------------------------------------
     ELEVATION — deliberately impoverished.
     Hairlines do the containment. These exist ONLY for true overlays.
     --------------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(17, 19, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(17, 19, 24, 0.06), 0 1px 2px rgba(17, 19, 24, 0.04);
  /* overlays only: */
  --shadow-panel: 0 12px 32px -12px rgba(17, 19, 24, 0.16), 0 2px 6px rgba(17, 19, 24, 0.04);
  --shadow-modal: 0 32px 64px -24px rgba(17, 19, 24, 0.28), 0 2px 8px rgba(17, 19, 24, 0.06);

  --ring: 0 0 0 3px rgba(237, 28, 36, 0.28);

  /* ---------------------------------------------------------------------
     MOTION — quick, subtle, precise. Fades and settles. Never springs.
     --------------------------------------------------------------------- */
  --dur-1: 120ms;
  --dur-2: 160ms;
  --dur-3: 200ms;
  --dur-4: 260ms;
  --dur-slow: 420ms;  /* scroll-reveal only */

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);  /* standard ease-out */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  /* NOTE: there is deliberately no --ease-spring token in this theme. */

  --t-color:  color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
  --t-transform: transform var(--dur-3) var(--ease);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container:      1280px;
  --container-wide: 1480px;
  --container-prose: 68ch;
  --gutter: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);  /* 20 → 40 */

  --header-h: 68px;

  /* ---------------------------------------------------------------------
     Z LADDER
     --------------------------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-drawer:   500;
  --z-modal:    600;
  --z-toast:    700;
}

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

/* ==========================================================================
   DARK — "Linear at night".

   This is STILL Studio. Read that twice before you touch anything here.
     · HAIRLINES still do the containment. Not glows, not heavy shadows. The
       border simply moves from #E6E8EB to #262A31 — it is the SAME line.
     · NO GRADIENTS. The red stays a flat plate.
     · Radii do not grow. Motion does not spring.
   The ground is a deep, calm, near-black slate (#0F1115) with a cool cast,
   one step up for tiles (#16181D) and one step down for the ink band. It is
   quiet and expensive, not moody and lit.

   Stamped on <html data-theme="dark"> by the pre-paint boot script. The
   prefers-color-scheme fallback at the very bottom of this file is a verbatim
   copy for the no-JS case — if you change one, change BOTH.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:              #0F1115;
  --bg-surface:      #16181D;   /* tiles, bands */
  --bg-surface-2:    #1D2027;
  --bg-ink:          #08090C;   /* the ONE dark band — a notch below the page */

  --text:            #E9EBEF;   /* 15.3:1 on --bg */
  --text-secondary:  #B6BBC4;   /* 9.2:1 */
  --text-muted:      #8B919C;   /* 5.9:1 on --bg, 5.4:1 on --bg-surface */
  --text-on-ink:     #E9EBEF;
  --text-on-ink-mut: #9BA1AB;
  --text-accent:     #FF7A80;   /* 7.5:1 — red TEXT has to lighten in the dark */

  --border:          #262A31;   /* THE hairline, at night */
  --border-strong:   #363C45;
  --border-ink:      #000000;
  --border-on-ink:   #23262C;

  --accent:          #FF3B41;   /* non-text: the dot, the underline, the ring */
  --accent-fill:     #D81B22;   /* flat red button — white on it is 5.1:1 */
  --accent-fill-hov: #E4262E;
  --accent-fill-act: #BF161C;
  --focus:           #FF4A52;

  --bg-raised:       #16181D;
  --bg-elevated:     #2A2E36;   /* the segmented thumb — a step ABOVE its track */
  --backdrop:        rgba(6, 7, 10, 0.72);
  --backdrop-heavy:  rgba(3, 4, 6, 0.93);
  --overlay-1:       rgba(255, 255, 255, 0.06);
  --overlay-2:       rgba(255, 255, 255, 0.10);

  --success:         #4ADE80;
  --success-border:  rgba(74, 222, 128, 0.45);
  --accent-wash:     rgba(255, 59, 65, 0.12);
  --accent-wash-bd:  rgba(255, 59, 65, 0.34);

  --media-bed:       #1A1D23;
  --bg-hover:        #1B1E24;
  --plate:           rgba(15, 17, 21, 0.92);

  --ink-hover:       #14161B;
  --ink-active:      #1D2027;
  --on-ink-hover:    #E9EBEF;
  --border-on-ink-h: #3A3F49;
  --bg-on-ink-h:     #14161B;
  --text-on-ink-faint: #767C87;

  /* Elevation stays impoverished. A black shadow on a near-black ground does
     nothing anyway — the 1px border is what separates an overlay from the
     page, exactly as it does in the light. These are just enough to say
     "this floats", and no more. */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.50);
  --shadow-panel:0 12px 32px -12px rgba(0, 0, 0, 0.66), 0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-modal:0 32px 64px -24px rgba(0, 0, 0, 0.80), 0 2px 8px rgba(0, 0, 0, 0.50);
  --ring:        0 0 0 3px rgba(255, 59, 65, 0.32);

  /* chrome — default (non-red) header + drawer, at night */
  --hdr-bg:          #0F1115;
  --hdr-line:        #262A31;
  --hdr-fg:          #E9EBEF;
  --hdr-fg-2:        #B6BBC4;
  --hdr-fg-3:        #8B919C;
  --hdr-mark:        #FF3B41;
  --hdr-hover-bg:    rgba(255, 255, 255, 0.06);
  --hdr-hover-fg:    #FFFFFF;
  --hdr-btn-fg:      #B6BBC4;
  --hdr-btn-bg-h:    rgba(255, 255, 255, 0.06);
  --hdr-btn-fg-h:    #FFFFFF;
  --hdr-seg-bg:      #16181D;
  --hdr-seg-line:    #262A31;
  --hdr-seg-fg:      #8B919C;
  --hdr-seg-fg-on:   #FFFFFF;
  --hdr-seg-thumb:   #2A2E36;
  --hdr-seg-thumb-bd:#3A3F49;
  --hdr-cta-bg:      #D81B22;
  --hdr-cta-bg-h:    #E4262E;
  --hdr-cta-fg:      #FFFFFF;
  --hdr-focus:       #FF4A52;

  --dw-bg:           #0F1115;
  --dw-line:         #262A31;
  --dw-fg:           #E9EBEF;
  --dw-fg-2:         #B6BBC4;
  --dw-fg-3:         #8B919C;
  --dw-hover-fg:     #FF7A80;
  --dw-active-fg:    #FF7A80;
  --dw-btn-fg:       #B6BBC4;
  --dw-btn-bg-h:     rgba(255, 255, 255, 0.06);
  --dw-seg-bg:       #16181D;
  --dw-seg-line:     #262A31;
  --dw-seg-fg:       #8B919C;
  --dw-seg-fg-on:    #FFFFFF;
  --dw-seg-thumb:    #2A2E36;
  --dw-seg-thumb-bd: #3A3F49;
  --dw-cta-bg:       #D81B22;
  --dw-cta-bg-h:     #E4262E;
  --dw-cta-fg:       #FFFFFF;
  --dw-focus:        #FF4A52;
}

/* ==========================================================================
   "BAKKAR RED" CHROME — the customiser's Header / Mobile-sidebar option.

   It re-points the chrome tokens at a white-on-red treatment and nothing
   else. No component knows it exists. Works in light AND dark, EN AND AR,
   because the header and the drawer read ONLY --hdr-* / --dw-*.

   LEGIBILITY: the plate is #C41219, not the brand #ED1C24. White on the brand
   red is 4.38:1 and FAILS AA at nav-label size; on the plate it is 6.1:1 and
   passes everywhere, including the 11px uppercase brand descriptor. The focus
   ring goes WHITE — a red ring on red is invisible.

   And it is FLAT. A gradient here would be a Momentum tell.
   ========================================================================== */
:root[data-header="red"] {
  --hdr-bg:          var(--c-red-plate);
  --hdr-line:        rgba(255, 255, 255, 0.22);
  --hdr-fg:          #FFFFFF;
  --hdr-fg-2:        #FFFFFF;
  --hdr-fg-3:        rgba(255, 255, 255, 0.90);   /* 5.1:1 on the plate */
  --hdr-mark:        #FFFFFF;
  --hdr-hover-bg:    rgba(255, 255, 255, 0.14);
  --hdr-hover-fg:    #FFFFFF;
  --hdr-btn-fg:      #FFFFFF;
  --hdr-btn-bg-h:    rgba(255, 255, 255, 0.16);
  --hdr-btn-fg-h:    #FFFFFF;
  --hdr-seg-bg:      var(--c-red-plate-2);
  --hdr-seg-line:    rgba(255, 255, 255, 0.24);
  --hdr-seg-fg:      rgba(255, 255, 255, 0.90);
  --hdr-seg-fg-on:   var(--c-red-plate);          /* red on the white thumb */
  --hdr-seg-thumb:   #FFFFFF;
  --hdr-seg-thumb-bd:#FFFFFF;
  /* A red CTA on a red bar would vanish. It inverts: white plate, red type. */
  --hdr-cta-bg:      #FFFFFF;
  --hdr-cta-bg-h:    #F0F1F3;
  --hdr-cta-fg:      var(--c-red-plate);
  --hdr-focus:       #FFFFFF;
}

:root[data-sidebar="red"] {
  --dw-bg:           var(--c-red-plate);
  --dw-line:         rgba(255, 255, 255, 0.22);
  --dw-fg:           #FFFFFF;
  --dw-fg-2:         #FFFFFF;
  --dw-fg-3:         rgba(255, 255, 255, 0.90);
  --dw-hover-fg:     #FFFFFF;
  --dw-active-fg:    #FFFFFF;
  --dw-btn-fg:       #FFFFFF;
  --dw-btn-bg-h:     rgba(255, 255, 255, 0.16);
  --dw-seg-bg:       var(--c-red-plate-2);
  --dw-seg-line:     rgba(255, 255, 255, 0.24);
  --dw-seg-fg:       rgba(255, 255, 255, 0.90);
  --dw-seg-fg-on:    var(--c-red-plate);
  --dw-seg-thumb:    #FFFFFF;
  --dw-seg-thumb-bd: #FFFFFF;
  --dw-cta-bg:       #FFFFFF;
  --dw-cta-bg-h:     #F0F1F3;
  --dw-cta-fg:       var(--c-red-plate);
  --dw-focus:        #FFFFFF;
}

/* ==========================================================================
   ARABIC FONT — the customiser's fourth choice.

   <html data-font="…"> re-points ONE token: --font-ar. Because the [dir="rtl"]
   block below is the only thing that feeds --font-ar into --font-body /
   --font-head / --font-num, the swap can only ever reach ARABIC text. The
   Latin face (Inter) is untouchable — it is the theme's voice.

   Specificity: `:root[data-font=…]` (0,2,0) beats the plain `:root` (0,1,0)
   that sets the default, and both are stamped on <html>, so the last word is
   always the attribute. No attribute at all — or data-font="sultan" — resolves
   to Sultan Nahia, the house face.

   The families themselves arrive LAZILY: app.js injects the Google Fonts
   stylesheet for a family the first time it is actually needed (on boot if it
   is the persisted choice, when the picker is opened so the previews can be
   honest, or on selection). Sultan Nahia is self-hosted above and needs
   nothing.
   ========================================================================== */
:root[data-font="sultan"]    { --font-ar: var(--f-sultan); }
:root[data-font="cairo"]     { --font-ar: var(--f-cairo); }
:root[data-font="tajawal"]   { --font-ar: var(--f-tajawal); }
:root[data-font="almarai"]   { --font-ar: var(--f-almarai); }
:root[data-font="plexar"]    { --font-ar: var(--f-plexar); }
:root[data-font="notosans"]  { --font-ar: var(--f-notosans); }
:root[data-font="notokufi"]  { --font-ar: var(--f-notokufi); }
:root[data-font="vazirmatn"] { --font-ar: var(--f-vazirmatn); }
:root[data-font="changa"]    { --font-ar: var(--f-changa); }
:root[data-font="elmessiri"] { --font-ar: var(--f-elmessiri); }
:root[data-font="amiri"]     { --font-ar: var(--f-amiri); }

/* ==========================================================================
   RTL — Arabic font swap.
   The Arabic faces run slightly small next to Inter, so they get a looser
   line-height (Arabic needs the leading for its ascenders/descenders).
   Tracking is ZEROED: Arabic is a connected script and letter-spacing
   literally breaks the joins.
   ========================================================================== */
[dir="rtl"] {
  --font-body: var(--font-ar);
  --font-head: var(--font-ar);
  --font-num:  var(--font-ar);

  --ls-display: 0;
  --ls-head:    0;
  --ls-body:    0;
  --ls-label:   0;
  --ls-wide:    0;

  --lh-tight:   1.3;
  --lh-head:    1.35;
  --lh-snug:    1.6;
  --lh-body:    1.85;
  --lh-relaxed: 1.95;
}

/* ==========================================================================
   REDUCED MOTION — collapse every duration to ~0.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-slow: 1ms;
  }
}

/* ==========================================================================
   NO-JS DARK FALLBACK.
   The boot script in <head> stamps data-theme on <html> before first paint, so
   this block only ever fires when scripting is off. It is a VERBATIM copy of
   the :root[data-theme="dark"] block above — if you change one, change both.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg:              #0F1115;
    --bg-surface:      #16181D;   /* tiles, bands */
    --bg-surface-2:    #1D2027;
    --bg-ink:          #08090C;   /* the ONE dark band — a notch below the page */

    --text:            #E9EBEF;   /* 15.3:1 on --bg */
    --text-secondary:  #B6BBC4;   /* 9.2:1 */
    --text-muted:      #8B919C;   /* 5.9:1 on --bg, 5.4:1 on --bg-surface */
    --text-on-ink:     #E9EBEF;
    --text-on-ink-mut: #9BA1AB;
    --text-accent:     #FF7A80;   /* 7.5:1 — red TEXT has to lighten in the dark */

    --border:          #262A31;   /* THE hairline, at night */
    --border-strong:   #363C45;
    --border-ink:      #000000;
    --border-on-ink:   #23262C;

    --accent:          #FF3B41;   /* non-text: the dot, the underline, the ring */
    --accent-fill:     #D81B22;   /* flat red button — white on it is 5.1:1 */
    --accent-fill-hov: #E4262E;
    --accent-fill-act: #BF161C;
    --focus:           #FF4A52;

    --bg-raised:       #16181D;
    --bg-elevated:     #2A2E36;   /* the segmented thumb — a step ABOVE its track */
    --backdrop:        rgba(6, 7, 10, 0.72);
    --backdrop-heavy:  rgba(3, 4, 6, 0.93);
    --overlay-1:       rgba(255, 255, 255, 0.06);
    --overlay-2:       rgba(255, 255, 255, 0.10);

    --success:         #4ADE80;
    --success-border:  rgba(74, 222, 128, 0.45);
    --accent-wash:     rgba(255, 59, 65, 0.12);
    --accent-wash-bd:  rgba(255, 59, 65, 0.34);

    --media-bed:       #1A1D23;
    --bg-hover:        #1B1E24;
    --plate:           rgba(15, 17, 21, 0.92);

    --ink-hover:       #14161B;
    --ink-active:      #1D2027;
    --on-ink-hover:    #E9EBEF;
    --border-on-ink-h: #3A3F49;
    --bg-on-ink-h:     #14161B;
    --text-on-ink-faint: #767C87;

    /* Elevation stays impoverished. A black shadow on a near-black ground does
       nothing anyway — the 1px border is what separates an overlay from the
       page, exactly as it does in the light. These are just enough to say
       "this floats", and no more. */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.50);
    --shadow-panel:0 12px 32px -12px rgba(0, 0, 0, 0.66), 0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-modal:0 32px 64px -24px rgba(0, 0, 0, 0.80), 0 2px 8px rgba(0, 0, 0, 0.50);
    --ring:        0 0 0 3px rgba(255, 59, 65, 0.32);

    /* chrome — default (non-red) header + drawer, at night */
    --hdr-bg:          #0F1115;
    --hdr-line:        #262A31;
    --hdr-fg:          #E9EBEF;
    --hdr-fg-2:        #B6BBC4;
    --hdr-fg-3:        #8B919C;
    --hdr-mark:        #FF3B41;
    --hdr-hover-bg:    rgba(255, 255, 255, 0.06);
    --hdr-hover-fg:    #FFFFFF;
    --hdr-btn-fg:      #B6BBC4;
    --hdr-btn-bg-h:    rgba(255, 255, 255, 0.06);
    --hdr-btn-fg-h:    #FFFFFF;
    --hdr-seg-bg:      #16181D;
    --hdr-seg-line:    #262A31;
    --hdr-seg-fg:      #8B919C;
    --hdr-seg-fg-on:   #FFFFFF;
    --hdr-seg-thumb:   #2A2E36;
    --hdr-seg-thumb-bd:#3A3F49;
    --hdr-cta-bg:      #D81B22;
    --hdr-cta-bg-h:    #E4262E;
    --hdr-cta-fg:      #FFFFFF;
    --hdr-focus:       #FF4A52;

    --dw-bg:           #0F1115;
    --dw-line:         #262A31;
    --dw-fg:           #E9EBEF;
    --dw-fg-2:         #B6BBC4;
    --dw-fg-3:         #8B919C;
    --dw-hover-fg:     #FF7A80;
    --dw-active-fg:    #FF7A80;
    --dw-btn-fg:       #B6BBC4;
    --dw-btn-bg-h:     rgba(255, 255, 255, 0.06);
    --dw-seg-bg:       #16181D;
    --dw-seg-line:     #262A31;
    --dw-seg-fg:       #8B919C;
    --dw-seg-fg-on:    #FFFFFF;
    --dw-seg-thumb:    #2A2E36;
    --dw-seg-thumb-bd: #3A3F49;
    --dw-cta-bg:       #D81B22;
    --dw-cta-bg-h:     #E4262E;
    --dw-cta-fg:       #FFFFFF;
    --dw-focus:        #FF4A52;
  }
}