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

   Colour comes from the owner's own posters and the dish itself: the sumac red
   of their banners and of the onions, the saffron yellow of their badges, the
   charred dark wood they shoot on, the pale dough and the golden crust of
   taboon bread. */

:root {
  /* Colour */
  --char: #1c110b;          /* charred wood: the hero, contact, text on light grounds */
  --char-deep: #120a06;     /* footer, phone menu, dock */
  --sumac: #8e1b24;         /* the posters' banners: brand red, buttons, the oven's rim */
  --sumac-deep: #5f1118;    /* the hours section */
  --saffron: #f2b632;       /* the posters' badges: the main button, the current day */
  --saffron-deep: #dc9c12;  /* the main button on hover */
  --dough: #f6ecd8;         /* raw dough: the light sections */
  --dough-deep: #ead9b4;    /* cards and hovers on dough */
  --crust: #d9a85e;         /* baked crust: the dial's loaf */
  --crust-deep: #b07a33;    /* the dial's closed-hours track */
  --crust-spot: #8a5520;    /* charred spots on the loaf */
  --milk: #fffaf0;
  --ash: #e5d3bd;           /* quiet text on dark and red grounds */
  --bark: #6b4630;          /* quiet text on dough */
  --open: #8fe3a8;          /* the "open now" dot */
  --shut: #f2b8b0;          /* the "closed now" dot */

  --line-on-dark: rgb(255 250 240 / 0.22);
  --line-on-light: rgb(28 17 11 / 0.14);
  --wash-on-dark: rgb(255 250 240 / 0.1);
  --ember: 0 1.5rem 4rem rgb(242 120 40 / 0.18), 0 0 0 0.5rem rgb(142 27 36 / 0.25);
  /* An ember glow under the oven: centred on phones; from 48rem on the end side
     (--glow-x-end, which the RTL block below flips; both resolve on <html>). */
  --glow-x-end: 75%;
  --hero-glow: radial-gradient(ellipse 90% 45% at 50% 85%, rgb(142 27 36 / 0.6), rgb(142 27 36 / 0) 70%);
  --hero-glow-wide: radial-gradient(ellipse 55% 70% at var(--glow-x-end) 60%, rgb(142 27 36 / 0.55), rgb(142 27 36 / 0) 70%);

  /* Type */
  --font: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: "Lalezar", "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --w-regular: 400;
  --w-medium: 500;
  --w-heavy: 650;
  --w-display: 400;         /* Lalezar has one weight: never let the browser fake a bold */

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.25rem + 1.2vw, 1.875rem);
  --fs-h2: clamp(2rem, 1.3rem + 3.4vw, 3.75rem);
  --fs-hero: clamp(2.75rem, 1.5rem + 6vw, 6rem);
  --fs-menu: clamp(2rem, 1.4rem + 3.4vw, 2.75rem);
  --fs-brand: var(--fs-lg);  /* the name in the header on phones; --fs-xl from 48rem */
  --fs-cliq: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);

  --tracking-value: 0.02em;  /* phone and alias (Latin only: never space Arabic letters) */
  --lh-display: 1.35;       /* Lalezar's Arabic marks need the room */
  --lh-body: 1.8;
  --lh-snug: 1.45;

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

  /* 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(4rem, 2.5rem + 7vw, 8rem);
  --wrap: 76rem;

  /* Shape */
  --radius-photo: 1.25rem;
  --radius-row: 0.875rem;
  --radius-card: 1.5rem;
  --radius-pill: 999px;
  --oven-arch: 50% 46%;     /* the top corners of a photo frame: the mouth of a taboon oven */
  --ratio-hero: 1120 / 736;
  --ratio-promise: 4 / 3;

  --underline-offset: 0.3em;
  --hairline: 1px;
  --shadow-dock: 0 0.5rem 1.5rem rgb(18 10 6 / 0.45);
  --shadow-card: 0 1rem 2.5rem rgb(28 17 11 / 0.12);

  --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;
  --emblem-stroke: 5;       /* in the emblem's own 120-unit box */
  --steam-stroke: 3.5;
  --glyph-stroke: 3;
  --dial-steam-stroke: 5;
  --now-stroke: 4;
  --status-width: 44%;      /* the dial's centre text stays on the plate */
  --logo: 3rem;             /* the header emblem on phones */
  --logo-wide: 3.5rem;
  --logo-footer: 4.5rem;
  --icon: 1.25rem;
  --icon-line: 1.375rem;
  --badge: 3.25rem;
  --badge-ring: 0.3rem;
  --marker: 2.5rem;
  --border: 1.5px;
  --rim: 0.375rem;          /* the sumac rim of the oven's mouth */
  --dash: 2px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --dot: 0.625rem;

  /* Hero */
  --masthead: 5.25rem;      /* height of the bar that sits over the hero */
  --hero-min: 100svh;
  --hero-max: 60rem;
  --oven-max: 36rem;
  --steam-width: 12rem;
  --steam-room: 4rem;     /* the space above the oven the steam rises in */

  --rail-card: 78%;         /* width of one promise in the phone rail: the next one peeks in */
  --promise-offset: 3rem;   /* the middle promise drops by this much from 48rem up */
  --dial: min(22rem, 100%);
  --dial-stroke: 18;
  --dock-height: 3.75rem;
  --dock-gap: 0.75rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur-dock: 0.3s;
  --dur-dial: 1.4s;
  --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-bake: 0.9s;         /* the dial's loaf rising */
  --dur-steam: 3.2s;        /* one breath of steam */
  --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;
  --steam-rise: -0.75rem;
  --steam-sink: 0.375rem;
  --steam-opacity: 0.85;
  --stagger: 0.09s;
  --stagger-row: 0.05s;
  --hero-lift: -3rem;       /* the hero's words leave upwards as the page scrolls */
  --photo-zoom: 1.12;       /* photos start this much larger and ease to size */
  --loaf-start: 0.6;
  --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;
}

/* In Arabic the end side is the left. */
:root[dir="rtl"] {
  --glow-x-end: 25%;
}

/* Latin sets wider than Arabic at the same size, and Lalezar's Latin needs less leading. */
:root:lang(en) {
  --fs-hero: clamp(2.5rem, 1.4rem + 5vw, 5.25rem);
  --fs-h2: clamp(1.875rem, 1.25rem + 3vw, 3.5rem);
  --lh-display: 1.1;
  --lh-body: 1.65;
}