/* tokens.css — every raw value on the site. site.css only ever reads these.

   Colour comes from two things the owner already has: the logo (maroon ring,
   darker petals, the coffee in the cup) and the storefront photo (the lit
   crimson roundel, the pale end of the Riyadh sky behind the building). */

:root {
  /* Colour */
  --maroon: #620b0e;        /* logo ring: the brand ground */
  --maroon-deep: #430709;   /* logo petals: hover, pressed, the contact section */
  --ink: #1f0608;           /* text on light grounds, footer, phone menu */
  --crimson: #c8274e;       /* the lit roundel on the building: the open-hours arc */
  --sky: #dcedfc;           /* pale sky from the photo: the hours section */
  --sky-deep: #b9dcf8;      /* the dial's closed-hours track */
  --crema: #c19a6b;         /* the coffee in the logo's cup */
  --milk: #ffffff;
  --blush: #ecd9da;         /* quiet text on maroon and ink */
  --plum: #5a383b;          /* quiet text on light grounds */
  --open: #8fe3a8;          /* the "open now" dot */
  --shut: #e9b7b9;          /* the "closed now" dot */

  --line-on-dark: rgb(255 255 255 / 0.2);
  --line-on-light: rgb(31 6 8 / 0.14);
  --wash-on-dark: rgb(255 255 255 / 0.1);
  --scrim: linear-gradient(to top, rgb(31 6 8 / 0.78), rgb(31 6 8 / 0) 46%);

  /* Type */
  --font: "Alexandria", "Segoe UI", Tahoma, system-ui, sans-serif;
  --w-regular: 400;
  --w-medium: 600;
  --w-heavy: 800;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --fs-h2: clamp(1.75rem, 1.15rem + 3vw, 3.25rem);
  --fs-hero: clamp(2.125rem, 1rem + 5.6vw, 5rem);
  --fs-menu: clamp(1.75rem, 1.2rem + 3.4vw, 2.5rem);

  --lh-display: 1.3;        /* Arabic marks need the room */
  --lh-body: 1.75;
  --lh-snug: 1.4;

  --measure: 34rem;
  --measure-hero: 52rem;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --wrap: 76rem;

  /* Shape */
  --radius-photo: 1.5rem;
  --radius-row: 1rem;
  --radius-pill: 999px;
  --ratio-hero-tall: 1250 / 947;
  --ratio-hero-wide: 2400 / 947;
  --ratio-step: 4 / 5;
  --ratio-sign: 3 / 2;

  --photo-max: 150rem;      /* the storefront photo is 2400px wide: never stretch it past that */
  --underline-offset: 0.3em;
  --hairline: 1px;
  --shadow-dock: 0 0.5rem 1.5rem rgb(31 6 8 / 0.35);

  --tap: 3rem;              /* smallest touch target */
  --tap-small: 2.5rem;
  --bar-width: 1.125rem;    /* the two bars of the menu button */
  --bar: 2px;
  --bar-gap: 0.375rem;
  --icon-stroke: 2;
  --glyph-stroke: 3;
  --steam-stroke: 5;
  --now-stroke: 4;
  --status-width: 32%;      /* the dial's centre text stays inside the cup */
  --logo: 3.25rem;
  --logo-footer: 4.5rem;
  --icon: 1.25rem;
  --icon-social: 1.375rem;
  --border: 1.5px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --dot: 0.625rem;

  /* Hero: the storefront photo under a veil of the brand maroon. On phones the
     photo fills the lower part of a full-height hero and the veil thins towards
     the bottom; from 48rem the photo fills the hero and the veil thins towards
     the far side from the text (--hero-veil-wide, set per direction below). */
  --masthead: 5.25rem;      /* height of the bar that sits over the hero */
  --hero-min: 100svh;
  --hero-max: 64rem;
  --hero-photo: 48%;        /* small enough that the whole sign fits across a phone */
  --hero-focus: 60%;        /* which part of the tall crop stays in view: the roundel and the sign */
  --hero-focus-wide: 60%;
  --hero-veil: linear-gradient(to bottom, rgb(98 11 14) 0%, rgb(98 11 14) 53%, rgb(98 11 14 / 0.84) 64%, rgb(98 11 14 / 0.5) 80%, rgb(98 11 14 / 0.26) 100%);
  --hero-veil-top: linear-gradient(to bottom, rgb(98 11 14 / 0.85), rgb(98 11 14 / 0) 28%);
  --hero-veil-side: rgb(98 11 14 / 0.96) 0%, rgb(98 11 14 / 0.9) 38%, rgb(98 11 14 / 0.42) 70%, rgb(98 11 14 / 0.16) 100%;
  --hero-veil-wide: var(--hero-veil-top), linear-gradient(to right, var(--hero-veil-side));
  --veil-button: rgb(98 11 14 / 0.6);

  --rail-card: 68%;         /* width of one photo in the phone rail: the next one peeks in */
  --step-offset: 2.5rem;    /* every second photo drops by this much from 48rem up */
  --dial: min(22rem, 100%);
  --dial-stroke: 11;
  --dock-height: 3.75rem;
  --dock-gap: 0.75rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --dur-fast: 0.18s;
  --dur-dock: 0.3s;
  --dur-dial: 1.4s;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-rise: 0.9s;         /* the hero's words arriving on load */
  --dur-settle: 2s;         /* the hero photo easing back from a slight zoom */
  --dur-reveal: 0.8s;       /* a block arriving as it scrolls into view */
  --dur-bloom: 0.7s;        /* one petal of the dial opening */
  --dur-ping: 2.2s;         /* the "live" pulse on the open dot and the dial's bead */
  --dur-nudge: 1.6s;        /* the scroll cue's bob */
  --rise: 1.75rem;          /* how far an arriving block travels */
  --rise-row: 0.625rem;
  --stagger: 0.09s;
  --stagger-row: 0.05s;
  --hero-drift: 14%;        /* the photo falls behind the scroll by this much of its height */
  --hero-lift: -3rem;       /* the hero's words leave upwards as the page scrolls */
  --photo-zoom: 1.14;       /* photos start this much larger and ease to size */
  --pan: 5%;                /* the sign photo drifts this far inside its frame */
  --nudge: 0.25rem;
  --ping: 0.55rem;
  --ping-scale: 2.6;
  --open-ring: rgb(143 227 168 / 0.55);
  --open-ring-end: rgb(143 227 168 / 0);
  --menu-dur-in: 0.62s;
  --menu-dur-out: 0.42s;
  --menu-delay: 0.22s;
  --menu-stagger: 0.06s;
  --menu-shift: 0.5em;
  --menu-reach: 150vmax;

  /* Layers */
  --z-dock: 20;
  --z-header: 30;
}

/* The veil is thickest on the side the text starts from. */
:root[dir="rtl"] {
  --hero-veil-wide: var(--hero-veil-top), linear-gradient(to left, var(--hero-veil-side));
  --hero-focus-wide: 45%;   /* the words are on the right, so keep the left-hand sign in the clear */
}

/* Latin sets wider than Arabic at the same size: pull the display sizes in. */
:root:lang(en) {
  --fs-hero: clamp(2rem, 1rem + 4.6vw, 4.5rem);
  --fs-h2: clamp(1.625rem, 1.1rem + 2.6vw, 3rem);
  --lh-display: 1.14;
  --lh-body: 1.65;
}