/* StayTrend 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 is the region at night: Layl (night) for ink and primary actions, Fayrouz (turquoise) for the trend line, the
   mark and peak nights, Shams (sun) for weekend nights, Nil (Nile blue) and Henna for below and above the market, on Milh (salt). */

/* ---- 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). */
  --layl:#0e2b2f;--layl-2:#2c4548;--fayrouz:#0f8f84;--fayrouz-deep:#0b6f67;--fayrouz-dark:#08514b;
  --shams:#f2b33d;--shams-ink:#8a5a12;--nil:#2f5c9e;--henna:#a65a0c;--jamr:#b93a32;--white:#ffffff;--milh:#f1f4f3;

  /* Neutrals: cool greys derived from Layl. */
  --canvas:#f1f4f3;
  --surface:#ffffff;
  --surface-2:#f8faf9;
  --surface-3:#e9eeed;
  --line:#dce3e2;
  --line-strong:#c7d1d0;
  --ink:#0e2b2f;
  --ink-2:#2c4548;
  --muted:#5b6d70;
  --faint:#5f7174;
  /* Actions and brand text. --brand is the fill for primary actions and selected controls (Layl, white text 14.9:1);
     --brand-ink is brand-coloured text (links, current page, icons): deep Fayrouz, 6.0:1 on white. The bright Fayrouz of the
     mark is --peak: the mark, the trend line, peak nights and the one highest-emphasis element on a screen. */
  --brand:#0e2b2f;
  --brand-hover:#1d3d41;
  --brand-ink:#0b6f67;
  --brand-soft:#ddf0ed;
  --brand-softer:#eff8f6;
  --brand-line:#b9dfd9;
  --on-brand:#ffffff;
  /* Peak nights: the top night of a week. Fills that carry text use the deep Fayrouz, so white text passes AA (6.0:1). */
  --peak:#0b6f67;--peak-line:#0f8f84;--peak-deep:#08514b;--peak-soft:#ddf0ed;--on-peak:#ffffff;
  /* Legacy accent names, now on the new palette. */
  --lime:#f2b33d;--on-lime:#0e2b2f;--gold:#f2b33d;
  /* Shams: warm nights (weekends, high demand) and the upper price band. Text on Shams is Layl. */
  --dune:#f2b33d;
  --dune-ink:#8a5a12;
  --dune-soft:#fcf0d6;
  /* Status. Errors are Jamr, never the brand colour, and always carry an icon and words. */
  --good:#0b6f67;--good-fill:#0f8f84;--good-soft:#e3f3f0;--good-line:#c2e3dd;
  --warn:#8a5a12;--warn-fill:#d9961f;--warn-soft:#fcf0d6;--warn-line:#f1dcae;
  --bad:#b93a32;--bad-fill:#d0493f;--bad-soft:#fbecea;--bad-line:#f2cfcb;
  /* Inverse surfaces: tooltips, code blocks, the product frame */
  --ink-bg:#0e2b2f;
  --on-ink:#eef4f3;
  --on-ink-muted:#a9bcbd;
  /* Map price keys (legacy names): lower, typical, higher */
  --price-low:#2f5c9e;--price-mid:#5b6d70;--price-high:#a65a0c;

  /* 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 cells have their own (--r-night, a quarter of a cell's width at most). */
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:14px;--r-xl:18px;--r-pill:999px;

  /* Elevation: only floating things (menus, popovers, the scrolled header) cast shadows. */
  --shadow-1:0 1px 2px rgba(14,43,47,.06);
  --shadow-2:0 1px 2px rgba(14,43,47,.05),0 8px 20px -8px rgba(14,43,47,.14);
  --shadow-pop:0 2px 6px rgba(14,43,47,.08),0 24px 48px -16px rgba(14,43,47,.3);
  --focus:0 0 0 3px var(--surface),0 0 0 5px var(--brand);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0a1f22;--surface:#10292d;--surface-2:#143034;--surface-3:#1a383c;--line:#23434a;--line-strong:#335659;
  --ink:#e8eeed;--ink-2:#cbd8d7;--muted:#9fb3b4;--faint:#8fa4a5;
  --brand:#e8eeed;--brand-hover:#ffffff;--on-brand:#0e2b2f;--brand-ink:#3fd1be;--brand-soft:#123c3a;--brand-softer:#0f2f31;--brand-line:#1d5a55;
  --peak:#3fd1be;--peak-line:#3fd1be;--peak-deep:#7fe3d5;--peak-soft:#123c3a;--on-peak:#0a1f22;
  --dune:#f5be55;--dune-ink:#f5be55;--dune-soft:#3a2d12;
  --good:#3fd1be;--good-fill:#1ba898;--good-soft:#103532;--good-line:#1d5a55;
  --warn:#f5be55;--warn-fill:#d99a32;--warn-soft:#3a2d12;--warn-line:#5a4519;
  --bad:#ff9189;--bad-fill:#e0574c;--bad-soft:#3d1c1a;--bad-line:#62302c;
  --ink-bg:#061517;--on-ink:#e8eeed;--on-ink-muted:#a9bcbd;
  --price-low:#7aa6ff;--price-mid:#9fb3b4;--price-high:#f0a35a;
  --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{
  /* Fayrouz scale around the trend turquoise (500 is the mark). */
  --fayrouz-50:#eff8f6;--fayrouz-100:#ddf0ed;--fayrouz-200:#b9dfd9;--fayrouz-300:#86c9bf;--fayrouz-400:#3fae9f;--fayrouz-500:#0f8f84;--fayrouz-600:#0b6f67;--fayrouz-700:#08514b;--fayrouz-800:#063c38;--fayrouz-900:#0e2b2f;
  --night:#0e2b2f;
  /* Price bands: a diverging scale for where a price sits in its market. Nil below, a neutral typical, Henna above;
     Layl 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:#2f5c9e;--on-band-1:#ffffff;
  --band-2:#dce6f5;--on-band-2:#1f3f70;
  --band-3:#e9eeed;--on-band-3:#0e2b2f;
  --band-4:#f9e4c2;--on-band-4:#6e3b08;
  --band-5:#a65a0c;--on-band-5:#ffffff;
  --band-selected:#0e2b2f;--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 white through Shams to Henna. */
  --heat-1:#fdf5e3;--heat-2:#f8dda0;--heat-3:#f2b33d;--heat-4:#d98a1e;--heat-5:#a65a0c;--heat-6:#6e3b08;
  /* Night cells: one night of the calendar, slightly taller than wide, with a small fixed corner. */
  --night-ratio:5/6;--r-night:8px;
  --shadow-night:0 1px 0 rgba(14,43,47,.04),0 10px 22px -14px rgba(14,43,47,.32);
  /* The trend line: solid where prices are collected, dotted where they lead (docs/brand/identity.md, "The line"). */
  --line-trend:var(--fayrouz);--line-trend-width:3px;
  /* 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:23%;
  --shadow-3:0 2px 4px rgba(14,43,47,.06),0 14px 34px -12px rgba(14,43,47,.22);
  --shadow-brand:0 10px 26px -12px rgba(14,43,47,.55);
  --ring-brand:0 0 0 4px rgba(14,43,47,.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:#7aa6ff;--on-band-1:#0a1f22;
  --band-2:#1c3357;--on-band-2:#bcd2ff;
  --band-3:#1a383c;--on-band-3:#e8eeed;
  --band-4:#45300f;--on-band-4:#f8d79e;
  --band-5:#f0a35a;--on-band-5:#0a1f22;
  --band-selected:#e8eeed;--on-band-selected:#0e2b2f;
  --heat-1:#1a383c;--heat-2:#5a4519;--heat-3:#d99a32;--heat-4:#e88f3a;--heat-5:#f0a35a;--heat-6:#f8d79e;
  --line-trend:#3fd1be;
  --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(232,238,237,.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}