/* JokerPrice design tokens (docs/brand/identity.md). Loaded first by the public site (site.css) and the signed-in app
   (frontend/index.html). Every colour, type size, space, radius and shadow in the other stylesheets should come from here.
   Light is the default everywhere; dark applies only with <html data-theme="dark"> (set by /theme.js from the visitor's choice).
   The palette comes from Sadu weaving and the card table: Bayt (goat-hair black) for ink and primary actions, Madder (the
   weave's red) for the mark and joker nights, Saffron for warm nights, Palm for good news, on warm-grey Haze. */

/* ---- Type: Readex Pro (SIL Open Font License 1.1, public/fonts/readex-pro/LICENSE), one variable file per script.
   Self-hosted because the CSP allows fonts only from the site itself. The fallbacks are metric-matched (size and vertical
   metrics measured against Readex Pro) so text keeps its place when the web font arrives. */
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(/fonts/readex-pro/readex-pro-latin-wght-normal.woff2) format("woff2-variations"),url(/fonts/readex-pro/readex-pro-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(/fonts/readex-pro/readex-pro-arabic-wght-normal.woff2) format("woff2-variations"),url(/fonts/readex-pro/readex-pro-arabic-wght-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Fallback";src:local("Arial"),local("Helvetica Neue"),local("Roboto");size-adjust:106.9%;ascent-override:93.5%;descent-override:23.4%;line-gap-override:0%}
@font-face{font-family:"Readex Arabic Fallback";src:local("Tahoma"),local("Geeza Pro"),local("Segoe UI");size-adjust:106.6%;ascent-override:93.8%;descent-override:23.5%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}

:root{
  color-scheme:light;
  /* Brand colours by name (docs/brand/identity.md). */
  --bayt:#241c1a;--bayt-2:#4a3f3b;--madder:#b3262e;--madder-deep:#a0222a;--madder-dark:#7d151c;
  --saffron:#e9a23b;--saffron-ink:#8a5a12;--palm:#2e6b4e;--indigo:#33507e;--ember:#c2410c;--wool:#ffffff;--haze:#f4f3f1;

  /* Neutrals: warm greys derived from Bayt. */
  --canvas:#f4f3f1;
  --surface:#ffffff;
  --surface-2:#faf9f8;
  --surface-3:#efece9;
  --line:#e6e1dd;
  --line-strong:#d5cec9;
  --ink:#241c1a;
  --ink-2:#4a3f3b;
  --muted:#6b605b;
  --faint:#716660;
  /* Actions and brand text. --brand is the fill for primary actions and selected controls (Bayt, white text 16.7:1);
     --brand-ink is brand-coloured text (links, current page, icons): deep madder, 7.6:1 on white. The bright madder of the
     mark is --joker: the mark, joker nights and the one highest-emphasis element on a screen. */
  --brand:#241c1a;
  --brand-hover:#3d302c;
  --brand-ink:#a0222a;
  --brand-soft:#f7e9e7;
  --brand-softer:#fbf4f2;
  --brand-line:#ebcfcb;
  --on-brand:#ffffff;
  --joker:#b3262e;--joker-deep:#7d151c;--joker-soft:#f6d9d5;--on-joker:#ffffff;
  /* Legacy accent names, now on the new palette. */
  --lime:#e9a23b;--on-lime:#241c1a;--gold:#e9a23b;
  /* Saffron: warm nights (weekends, high demand) and the upper price band. Text on saffron is Bayt. */
  --dune:#e9a23b;
  --dune-ink:#8a5a12;
  --dune-soft:#fcf1dc;
  /* Status. Errors are Ember, never madder, and always carry an icon and words. */
  --good:#2e6b4e;--good-fill:#3d8a64;--good-soft:#e7f1ec;--good-line:#c7dfd2;
  --warn:#8a5a12;--warn-fill:#d08a1e;--warn-soft:#fcf1dc;--warn-line:#f1ddb5;
  --bad:#c2410c;--bad-fill:#dc5a1e;--bad-soft:#fdefe7;--bad-line:#f6d2bf;
  /* Inverse surfaces: tooltips, code blocks, the product frame */
  --ink-bg:#241c1a;
  --on-ink:#f6f1ee;
  --on-ink-muted:#b8aca6;
  /* Map price keys (legacy names): lower, typical, higher */
  --price-low:#2e6b4e;--price-mid:#6b605b;--price-high:#b3262e;

  /* Type */
  --font-sans:"Readex Pro","Readex Fallback","Readex Arabic Fallback",ui-sans-serif,system-ui,sans-serif;
  --font-display:var(--font-sans);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-xs:12px;--t-sm:13px;--t-base:15px;--t-md:17px;--t-lg:20px;--t-xl:26px;--t-2xl:34px;--t-3xl:clamp(36px,5.2vw,60px);
  --lh-tight:1.1;--lh-snug:1.28;--lh-body:1.6;
  --track-display:-.025em;--track-head:-.015em;

  /* Space (4px base) */
  --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;
  --gutter:16px;--page-max:1200px;

  /* Radii: controls < panels < windows. Night cards have their own shape (--r-night, 14% of a card's width). */
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:14px;--r-xl:18px;--r-pill:999px;

  /* Elevation: only floating things (menus, popovers, dealt night cards) cast shadows. */
  --shadow-1:0 1px 2px rgba(36,28,26,.06);
  --shadow-2:0 1px 2px rgba(36,28,26,.05),0 8px 20px -8px rgba(36,28,26,.14);
  --shadow-pop:0 2px 6px rgba(36,28,26,.08),0 24px 48px -16px rgba(36,28,26,.3);
  --focus:0 0 0 3px var(--surface),0 0 0 5px var(--brand);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#1a1412;--surface:#231b18;--surface-2:#2a211e;--surface-3:#322825;--line:#3b302c;--line-strong:#4d403b;
  --ink:#f4efec;--ink-2:#d9cfca;--muted:#b8aca6;--faint:#a0948e;
  --brand:#f4efec;--brand-hover:#ffffff;--on-brand:#241c1a;--brand-ink:#f0646b;--brand-soft:#3a1f1f;--brand-softer:#2c1c1b;--brand-line:#5a2b2c;
  --joker:#c7333b;--joker-deep:#f0646b;--joker-soft:#4a1e20;
  --dune:#f2b85b;--dune-ink:#f2b85b;--dune-soft:#3a2a12;
  --good:#5fc597;--good-fill:#3d8a64;--good-soft:#173328;--good-line:#24503e;
  --warn:#f2b85b;--warn-fill:#d99a32;--warn-soft:#3a2a12;--warn-line:#5a4219;
  --bad:#ff9a6b;--bad-fill:#e5662b;--bad-soft:#3d2016;--bad-line:#62301f;
  --ink-bg:#120d0c;--on-ink:#f4efec;--on-ink-muted:#b8aca6;
  --price-low:#5fc597;--price-mid:#b8aca6;--price-high:#f0646b;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 2px rgba(0,0,0,.35),0 8px 22px -8px rgba(0,0,0,.6);
  --shadow-pop:0 2px 6px rgba(0,0,0,.4),0 28px 56px -16px rgba(0,0,0,.75);
}

/* Shared base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-size:var(--t-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;font-feature-settings:"kern"}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(input,select,textarea){background-color:var(--surface)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num,table td,.kpi-value{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- Brand system (documented at /brand and in docs/brand/identity.md) ---- */
:root{
  /* Madder scale around the joker red (500 is the mark). */
  --madder-50:#fbf4f2;--madder-100:#f7e9e7;--madder-200:#ebcfcb;--madder-300:#df9c97;--madder-400:#cc5a5c;--madder-500:#b3262e;--madder-600:#a0222a;--madder-700:#7d151c;--madder-800:#5c0f14;--madder-900:#3a1f1f;
  --night:#241c1a;
  /* Price bands: a diverging scale for where a price sits in its market. Palm below, a neutral typical, madder above;
     Bayt marks the selected item. Every on-band text colour passes WCAG AA (4.5:1) on its band (tests/brand.test.mjs).
     Pins also show the price as text, so colour is never the only signal. */
  --band-1:#2e6b4e;--on-band-1:#ffffff;
  --band-2:#cfe5d8;--on-band-2:#1f4a36;
  --band-3:#efece9;--on-band-3:#241c1a;
  --band-4:#f6d9d5;--on-band-4:#7d151c;
  --band-5:#b3262e;--on-band-5:#ffffff;
  --band-selected:#241c1a;--on-band-selected:#ffffff;
  --price-lower:var(--band-1);--price-typical:var(--band-3);--price-higher:var(--band-5);
  /* Heat: a sequential ramp for demand and price intensity, from wool through saffron to madder. */
  --heat-1:#fbf3e3;--heat-2:#f3d39a;--heat-3:#e9a23b;--heat-4:#c4512c;--heat-5:#b3262e;--heat-6:#7d151c;
  /* Night cards (the reserved card shape): portrait 5:7, corner radius 14% of the width. */
  --night-ratio:5/7;--r-night:14%;
  --shadow-night:0 1px 0 rgba(36,28,26,.04),0 12px 26px -14px rgba(36,28,26,.38);
  /* Type roles */
  --font-arabic:var(--font-sans);
  --font-brand:var(--font-sans);
  --t-4xl:clamp(40px,6vw,76px);
  /* The type scale of docs/brand/identity.md, by size: 16 is body, display is for one headline per page. */
  --fs-12:12px;--fs-13:13px;--fs-15:15px;--fs-16:16px;--fs-18:18px;--fs-22:22px;--fs-28:28px;--fs-36:36px;--fs-48:48px;--fs-display:clamp(40px,6vw,76px);
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-heavy:700;
  --lh-arabic:1.85;
  /* Radii and elevation */
  --r-2xl:24px;--r-mark:14%;
  --shadow-3:0 2px 4px rgba(36,28,26,.06),0 14px 34px -12px rgba(36,28,26,.22);
  --shadow-brand:0 10px 26px -12px rgba(36,28,26,.55);
  --ring-brand:0 0 0 4px rgba(36,28,26,.14);
  /* Motion: transform and opacity only. Durations collapse to zero under prefers-reduced-motion (below). */
  --dur-instant:80ms;--dur-fast:140ms;--dur-base:220ms;--dur-slow:360ms;--dur-slower:600ms;--dur-hero:1200ms;
  --ease-standard:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --reveal-distance:18px;
}
:root[data-theme="dark"]{
  --band-1:#5fc597;--on-band-1:#0f2a1e;
  --band-2:#1e3d2f;--on-band-2:#a9e3c6;
  --band-3:#2e2522;--on-band-3:#f4efec;
  --band-4:#4a1e20;--on-band-4:#f7b9bc;
  --band-5:#f0646b;--on-band-5:#2a0a0c;
  --band-selected:#f4efec;--on-band-selected:#241c1a;
  --heat-1:#2e2522;--heat-2:#5a4219;--heat-3:#d99a32;--heat-4:#e0703f;--heat-5:#f0646b;--heat-6:#f7b9bc;
  --shadow-night:0 1px 0 rgba(0,0,0,.3),0 14px 28px -14px rgba(0,0,0,.8);
  --shadow-3:0 2px 4px rgba(0,0,0,.35),0 16px 36px -12px rgba(0,0,0,.7);
  --shadow-brand:0 12px 30px -12px rgba(0,0,0,.7);
  --ring-brand:0 0 0 4px rgba(244,239,236,.2);
}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-slower:0ms;--dur-hero:0ms;--reveal-distance:0px}}

/* ---- Arabic ---- Readex Pro covers Arabic in the same family, so only the rhythm changes: Arabic letters join, so
   tracking stays at zero, and the taller script needs more line height. */
:root:lang(ar){
  --font-sans:"Readex Pro","Readex Arabic Fallback","Readex Fallback",ui-sans-serif,system-ui,sans-serif;
  --track-display:0em;--track-head:0em;--lh-tight:1.35;--lh-snug:1.5;--lh-body:var(--lh-arabic,1.85);
}
[lang="ar"]:not(:root){font-family:var(--font-sans);letter-spacing:0}