/* Saudi Box - design tokens.
   Values only. No component rules, no selectors beyond :root.
   Nothing anywhere else in the project writes a raw hex. */

:root {
  /* ---------------------------------------------------------------- colour */
  --burgundy: #7A1717;
  --espresso: #3A2118;
  --beige: #C9A77A;
  --cream: #F3E8D3;
  --ink: #111111;
  --off-white: #CCCED2;

  /* Cream at zero alpha. Gradients need an explicit transparent version of the
     colour they fade to - fading to the `transparent` keyword interpolates
     through transparent black and dirties the ramp. */
  --cream-0: rgba(243, 232, 211, 0);

  /* Semantic aliases. The page walks from light to dark exactly once:
     the hero is cream, everything from the menu down is burgundy then
     espresso. These are the only two surface pairings that exist. */
  --surface-light: var(--cream);
  --on-surface-light: var(--ink);
  --surface-dark: var(--burgundy);
  --on-surface-dark: var(--cream);
  --surface-deep: var(--espresso);
  --on-surface-deep: var(--cream);

  --accent: var(--beige);            /* the only accent. resist adding a second */
  --rule: var(--off-white);          /* hairlines */
  /* Written as rgba, not color-mix: color-mix is Safari 16.2+ and this site
     targets iOS Safari 16. In srgb the two are the same colour, and rgba
     needs no @supports. These are the only place the channel values are
     repeated; they are --cream, --ink and --burgundy. */
  /* 0.72, not 0.65. At 65% this composites to exactly 4.50:1 on burgundy -
     the AA threshold to two decimal places, which is not a margin, it is a
     coin toss against any renderer that rounds differently. 72% is 5.14:1. */
  --muted-on-dark: rgba(243, 232, 211, 0.72);
  --muted-on-light: rgba(17, 17, 17, 0.6);
  --hairline-on-light: rgba(17, 17, 17, 0.15);
  /* --rule is --off-white, far too bright to draw a line on burgundy - it
     reads as a highlight, not a division. Cream at 22% is the same line at
     the same weight without the glow. */
  --hairline-on-dark: rgba(243, 232, 211, 0.22);

  /* The hero sets its type in the brand burgundy rather than ink - tone on
     tone with the cup, which is how the printed identity works (client
     decision, 2026-09-02). Measured on cream: full burgundy is 8.92:1, and
     the supporting lines need 80% rather than the 60% ink uses, because
     burgundy is already dark - at 60% it falls to 3.94:1, under the 4.5:1
     small-text requirement. At 80% it is 5.69:1. */
  --hero-heading: var(--burgundy);
  --hero-muted: rgba(122, 23, 23, 0.8);

  --focus-ring: var(--beige);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* ------------------------------------------------------------ typeface
     Thmanyah Serif Display, self-hosted - one family for everything, which is
     how the Urban City site does it. It is bilingual, so one stack serves
     Arabic and Latin with no per-language switching, and it carries the same
     high-contrast character as the logo. Weight is what separates display
     from fine text, not a second family. */
  --font-display: 'Thmanyah Serif Display', 'Times New Roman', Times, serif;
  --font-body: 'Thmanyah Serif Display', 'Times New Roman', Times, serif;

  /* --------------------------------------------------------- type scale
     Modular scale, ratio 1.333 (perfect fourth), 1rem base.
     Fixed steps for anything that should not move with the viewport. */
  --scale-ratio: 1.333;
  --step--2: 0.563rem;
  --step--1: 0.75rem;
  --step-0: 1rem;
  --step-1: 1.333rem;
  --step-2: 1.777rem;
  --step-3: 2.369rem;
  --step-4: 3.157rem;
  --step-5: 4.209rem;
  --step-6: 5.61rem;
  --step-7: 7.478rem;

  /* Fluid display sizes. The hero headline is meant to run past the edge of
     the viewport and be cropped by the cup - that is the layout, not a bug. */
  --fs-hero: clamp(3rem, 6.4vw, 6.5rem);
  --fs-h1: clamp(var(--step-3), 7vw, var(--step-5));
  --fs-h2: clamp(var(--step-2), 4.5vw, var(--step-4));
  --fs-h3: clamp(var(--step-1), 2.6vw, var(--step-2));
  --fs-body: clamp(var(--step-0), 0.96rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(var(--step-1), 1.1rem + 0.8vw, var(--step-2));
  --fs-small: clamp(0.8125rem, 0.77rem + 0.2vw, 0.9375rem);

  --lh-hero: 0.86;
  --lh-display: 1.04;
  --lh-heading: 1.14;
  --lh-body: 1.6;
  --lh-tight: 1.3;

  --fw-light: 300;    /* fine text: annotation cards, captions, eyebrows */
  --fw-body: 400;
  --fw-medium: 500;
  --fw-strong: 700;   /* a real Bold file exists; never ask for a weight we do not ship */
  --fw-heading: 700;  /* headings are Bold */

  /* The logo is letterspaced, so display type may be. Small labels, eyebrows
     and captions may not be - sentence case, normal tracking, no exceptions. */
  --tracking-hero: -0.02em;
  --tracking-display: 0.01em;
  --tracking-lockup: 0.34em;
  --tracking-body: 0;

  /* Arabic and Latin now come from one family that was drawn together, so the
     15% leading compensation the old two-family pairing needed is gone and
     sizes are at parity. Arabic still wants a little more room vertically for
     its ascenders and descenders. */
  --ar-display-scale: 1;
  --ar-body-scale: 1;
  --ar-lh-scale: 1.18;   /* Arabic headings want ~1.35 leading, as on Urban City */

  --measure: 62ch;         /* body copy */
  --measure-tight: 46ch;   /* leads and pull quotes */

  /* ------------------------------------------------------------- spacing
     Same 1.333 ratio, rounded to whole pixels. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --space-5xl: 12rem;

  --section-padding-block: clamp(var(--space-2xl), 10vh, var(--space-4xl));
  --gutter: clamp(var(--space-s), 5vw, var(--space-xl));
  --content-max: 76rem;
  --prose-max: 42rem;

  /* --------------------------------------------------------------- lines */
  --hairline: 1px;
  --frame-line: 2px;
  --radius-none: 0;
  --radius-hairline: 2px;   /* everything is square unless there is a reason */

  /* --------------------------------------------------------------- motion
     Below the hero, motion is close to absent: one considered reveal on the
     menu and nothing else. These exist so that reveal is consistent. */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 620ms;
  --dur-reveal: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* How the wheel lands on a card when a thumb is lifted (client, 2026-09-03).
     A plain ease-out arrives and stops dead, which on an object you have just
     been holding reads as the wheel being taken off you. This overshoots by
     about 3% and comes back - the smallest amount that registers as weight
     rather than as a bounce. Used on the slide transform and nowhere else. */
  --dur-settle: 560ms;
  --ease-settle: cubic-bezier(0.2, 1.12, 0.28, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------------------------------------------------------------- hero
     The frames are transparent cut-outs, so the stacking order is the whole
     trick: headline behind the canvas, annotation cards in front of it. */
  --hero-pin-length: 300vh;
  --hero-frame-count: 52;    /* chosen by equal visual difference, see hero-scrub.js */
  --hero-breakpoint: 768px;
  --header-height: 4.5rem;
  --header-inset: var(--space-s);   /* how far the floating bar sits off the edges */
  --logo-height: 3rem;
  --hero-fade-height: 20%;   /* how far up the cream blend reaches */
  --hero-fade-stop: 12%;     /* how far up that band stays fully opaque */

  /* ---------------------------------------------------------------- glass
     Only ever used where there is something behind it to refract: the hero
     cards over the canvas, the header crossing the hero/burgundy seam, and
     the language switcher. Never over flat burgundy. */
  --glass-bg-light: rgba(243, 232, 211, 0.55);
  --glass-bg-dark: rgba(122, 23, 23, 0.42);

  /* A THIRD tint, for the two ESPRESSO sections - Instagram and the footer.
     Glass is supposed to take the colour of what it is covering, and the
     burgundy recipe does that correctly over burgundy and nowhere else: over
     espresso, rgba(122,23,23,0.42) lands at 85,29,24 - a red band laid across
     a brown surface, which reads as a bar that did not notice it had crossed
     into a different section (client, 2026-09-02).

     So the deep surfaces get the same 42% of their OWN colour. Over the flat
     footer that leaves the bar as its hairline and its shadow, which is what
     a pane of glass over one flat colour honestly looks like; over the
     Instagram grid it washes the photographs and moves with them, which is
     the whole point of using glass there at all. */
  --glass-bg-deep: rgba(58, 33, 24, 0.42);
  --glass-line: rgba(255, 255, 255, 0.28);
  --glass-blur: 10px;

  /* Saturation is what makes cream glass refract the coffee warmly, so it
     stays on over the hero. Over burgundy it has nothing to revive and only
     invents a colour: measured, saturate(1.4) renders #7A1717 as #8B1111, a
     brighter red than the brand one, and the header reads as a band of a
     second red rather than as glass. The dark state turns it off. */
  --glass-saturate: 1.4;
  --glass-sheen: rgba(255, 255, 255, 0.4);      /* the 1px inset top highlight */
  --glass-shadow: rgba(58, 33, 24, 0.10);
  --glass-radius: 14px;

  /* Used two ways, and both are failure modes rather than styles: the
     @supports fallback where backdrop-filter does not exist, and the runtime
     kill switch when the device cannot hold frame rate with the blur on. */
  --glass-solid-light: rgba(243, 232, 211, 0.92);
  --glass-solid-dark: rgba(122, 23, 23, 0.92);
  --glass-solid-deep: rgba(58, 33, 24, 0.92);

  --z-hero-bg: 0;
  --z-hero-headline: 1;
  --z-hero-canvas: 2;
  --z-hero-fade: 3;   /* the cream blend sits above the canvas, below the cards */
  --z-hero-cards: 4;
  --z-hero-text: 5;        /* the type sits above the artwork on wide screens */
  --z-header: 10;
  --z-loader: 20;
  --z-skip-link: 30;
}