/* Design tokens: "open all night", the direction the founder picked on 2026-11-12.
   Specification: ops/briefs/2026-11-12/247-ads-calls/redesign/direction-b (the render wins over
   its look.md). DESIGN.md describes the system; this file is its only source of values.

   One appearance, dark. An off-black ground, bone type, and ONE signal green that fills only the
   Call button and marks the open lamp, icons and link underlines. Geist for Latin and for every
   number or code in both locales; IBM Plex Sans Arabic for Arabic words. Rounded boxes, no
   shadows. The poster system (paper, red, yellow slab, Big Shoulders, square corners with block
   shadows) was retired by the founder on the same date and nothing of it stays here.

   Three rules a later edit must keep:
   1. The palette block's selector keeps [data-theme="dark"]. scripts/check-contrast.mjs records a
      block only when its selector says data-theme=, so a bare :root silently stops every declared
      contrast check. The bare :root beside it is what paints a page, since no page carries a
      data-theme attribute.
   2. No comment inside the palette block: the check splits it on ";" and a comment swallows the
      next declaration's name.
   3. base.css and pages.css reference tokens only. The check fails the build on a raw colour
      anywhere else under src/. A single-line color-mix() of two tokens is the one exemption.

   Names that predate this direction (--color-bone, --color-ink-band, --fs-mono-*, the -on-ink
   and -on-bone pairs) are kept where pages not yet ported still read them. Their VALUES are this
   direction's, so those pages are legible on the dark ground until their own slice. */

:root {
  /* ---- Type ------------------------------------------------------------------------------ */
  /* Geist carries Latin text and every numeral, size and phone number in both locales, always
     left to right. The "mono" names are kept for the rules that set codes; they are Geist with
     tabular figures now, not a monospace. */
  --font-latin: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;
  --font-text: var(--font-latin);
  --font-display: var(--font-latin);
  --font-latin-display: var(--font-latin);
  --font-arabic-display: var(--font-arabic);
  --font-mono: var(--font-latin);
  --font-family: var(--font-text);
  --weight-display: 600;
  --weight-h1: 600;
  --weight-mono: 500;
  --weight-number: 650;
  --weight-arabic-body: 400;
  --font-numeric: "tnum" 1, "lnum" 1;
  --calc-number-width: 6ch;
  --calc-unit-width: 4ch;

  --tracking-display: -0.025em;
  --tracking-display-hero: -0.03em;
  --tracking-display-title: -0.015em;
  --tracking-number: -0.03em;
  --tracking-code: -0.04em;
  --tracking-mono-size: -0.03em;
  --tracking-mono-404: -0.04em;
  --tracking-mono-tight: -0.02em;
  --tracking-label: 0;
  --tracking-nav: 0;
  --tracking-logo-companion: 0.35em;

  /* The ramp, read off the render: h1 40 -> 72, h2 30 -> 44, body 17 -> 18 (the step is at 60em,
     below). Line heights are unitless so the Arabic block can restate them outright. */
  --_fs-h1-hero: 40px;
  --_lh-h1-hero: 1.04;
  --_fs-h1-page: 34px;
  --_lh-h1-page: 1.08;
  --_fs-h1-about: var(--_fs-h1-page);
  --_lh-h1-about: var(--_lh-h1-page);
  --_fs-h1-service: var(--_fs-h1-page);
  --_lh-h1-service: var(--_lh-h1-page);
  --_fs-h1: var(--_fs-h1-page);
  --_lh-h1: var(--_lh-h1-page);
  --_fs-h1-place: var(--_fs-h1-page);
  --_lh-h1-place: var(--_lh-h1-page);
  --_fs-h2: 30px;
  --_lh-h2: 1.1;
  --_fs-title-lg: 24px;
  --_fs-title: 19px;
  --_fs-title-s: 17px;

  /* Large numerals are the display device: the phone number and a tyre size are set as signs. */
  --fs-sign: clamp(58px, 19vw, 240px);
  --fs-code: clamp(44px, 13.6vw, 150px);
  --fs-call-number: 37px;
  --fs-numeral-404: clamp(120px, 18vw, 240px);
  --lh-numeral-404: 1;
  --fs-mono-display: clamp(40px, 5vw, 64px);
  --fs-mono-lg: 40px;
  --fs-mono-md: 30px;
  --fs-mono-sm: 24px;
  --fs-mono-body: 17px;
  --fs-mono-row: 19px;
  --fs-mono-meta: 15px;
  --fs-select: 22px;
  --fs-numeral: var(--fs-mono-md);
  --fs-stat: clamp(30px, 3.4vw, 44px);
  --fs-button: 17px;
  --fs-bar: 17px;
  --fs-wordmark: 24px;
  --fs-sidewall: var(--fs-mono-display);

  --_fs-body-lead: 17px;
  --_lh-body-lead: 1.5;
  --_fs-body: 17px;
  --_lh-body: 1.5;
  --_fs-body-place: 17px;
  --_lh-body-place: 1.5;
  --_fs-body-md: 16px;
  --_fs-chip: 15px;
  --_fs-meta: 15px;
  --_fs-caption: 14px;
  --_fs-label: 14px;

  /* Arabic: its own sizes and leading, never a multiple of the Latin step. */
  --fs-ar-display: 1;
  --fs-ar-text: 1;
  --lh-ar-display: 1.3;
  --lh-ar-text: 1.7;

  /* ---- Space ----------------------------------------------------------------------------- */
  --space-1: 2px;
  --space-2: 5px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 26px;
  --space-9: 32px;
  --space-10: 48px;
  --space-11: 6px;
  --space-12: 12px;
  --space-13: 18px;
  --space-14: 22px;
  --space-15: 24px;
  --space-16: 28px;
  --space-17: 36px;
  --space-18: 40px;
  --space-19: 56px;
  --space-20: 64px;
  --space-21: 72px;
  --space-22: 80px;
  --space-23: 96px;

  /* The content line. The render's .wrap is 1200 wide with a 20px gutter on a phone and 40px from
     45em, so the column is 1120 at 1280. --edge is the one inset every full-width box takes. */
  --gutter: 20px;
  --content-max: 1120px;
  --edge: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --section-gap: 44px;
  --measure: 34em;
  --content-narrow: 44rem;

  /* ---- Shape ----------------------------------------------------------------------------- */
  /* Two radii: 16 on anything pressed or typed into, 24 on photographs and panels. 10 is only for
     small marks inside a control (a logo chip in a row). The lamp is the one circle. */
  --radius-ctl: 16px;
  --radius-box: 24px;
  --radius-sm: 10px;
  --radius-md: var(--radius-ctl);
  --radius-lg: var(--radius-box);
  --radius-pill: 999px;
  --card-radius: var(--radius-box);
  --finder-radius: var(--radius-box);
  --panel-radius: var(--radius-box);
  --radius-tile: var(--radius-ctl);

  --border-width: 1px;
  --border-strong: 1px;

  /* No shadows anywhere. The names stay so an unported rule resolves to nothing. */
  --shadow-card: none;
  --shadow-card-wide: none;
  --shadow-panel: none;
  --shadow-panel-wide: none;
  --shadow-control: none;
  --shadow-control-wide: none;
  --shadow-pill: none;
  --shadow-bar: none;
  --shadow-plate: none;

  /* ---- Controls -------------------------------------------------------------------------- */
  --tap-target: 48px;
  --control-height: 56px;
  --call-height: 88px;
  --bar-button-h: 54px;
  --action-bar-height: 75px;
  --masthead-height: 64px;
  --logo-height: 34px;
  --plate-height: 64px;
  --plate-logo-height: 22px;
  /* A numeral field of the size finder, and the mark at the start of a list row. */
  --field-height: 92px;
  --fs-field: 30px;
  --row-plate-w: 84px;
  --row-plate-h: 56px;
  --row-logo-height: 24px;
  /* The size as a page heading: the size panel's code, capped for a list page. */
  --fs-code-page: clamp(44px, 12vw, 88px);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;

  --z-header: 10;
  --z-action-bar: 20;
  --z-skip: 30;

  /* ---- Carried for pages not yet ported -------------------------------------------------- */
  --result-card-min: 280px;
  --result-name-size: 19px;
  --result-detail-size: 15px;
  --result-media-height: 176px;
  --result-logo-width: 96px;
  --result-logo-height: 36px;
  --finder-overlap: 0px;
  --finder-width-1280: 1104px;
  --finder-width-390: 350px;
  --fold-peek: 24px;
  --hero-card-h: auto;
  --hero-image-opacity-about: 0.28;
  --hero-mask: linear-gradient(to bottom, #000 15%, transparent 100%);
  --hero-height-about: 560px;
  --catalogue-tile-min: 140px;
  --brand-plate-width: 152px;
  --brand-plate-height: 64px;
  --brand-plate-width-desktop: 190px;
  --brand-plate-height-desktop: 84px;
  --brand-object-width: 300px;
  --brand-object-width-desktop: 372px;
  --brand-object-bleed: 56px;
  --brand-head-height: 420px;
  --brand-head-text-width: 640px;
  --brand-lede-width: 46ch;
  --brand-size-fluid: 5.4vw;
  --brand-index-heading-width: 18ch;
  --brand-index-card-min: 102px;
  --brand-index-card-min-desktop: 150px;
  --brand-index-logo-height: 52px;
  --brand-index-logo-height-desktop: 62px;
  --brand-index-rail-height: calc(100dvh - var(--space-9) - var(--space-9));
  --finder-recent-max: 160px;
  --finder-chevron-size: 7px;
  --finder-chevron-inset: 12px;
  --fs-guide-code: clamp(2.5rem, 9vw, 4.5rem);
  --fs-guide-dot: 0.4em;
  --guide-diagram-width: 420px;
  --guide-key-width: 1.6ch;
  --lh-guide-heading: 1.15;
  --diagram-stroke: 2;
  --diagram-stroke-thin: 1.25;
  --logo-box: 5 / 2;

  /* The public names. html[lang="ar"] restates the ones Arabic sets differently. */
  --fs-h1: var(--_fs-h1);
  --lh-h1: var(--_lh-h1);
  --fs-h1-hero: var(--_fs-h1-hero);
  --lh-h1-hero: var(--_lh-h1-hero);
  --fs-h1-about: var(--_fs-h1-about);
  --lh-h1-about: var(--_lh-h1-about);
  --fs-h1-service: var(--_fs-h1-service);
  --lh-h1-service: var(--_lh-h1-service);
  --fs-h1-page: var(--_fs-h1-page);
  --lh-h1-page: var(--_lh-h1-page);
  --fs-h1-place: var(--_fs-h1-place);
  --lh-h1-place: var(--_lh-h1-place);
  --fs-h2: var(--_fs-h2);
  --lh-h2: var(--_lh-h2);
  --fs-title-lg: var(--_fs-title-lg);
  --fs-title: var(--_fs-title);
  --fs-title-s: var(--_fs-title-s);
  --fs-body-lead: var(--_fs-body-lead);
  --lh-body-lead: var(--_lh-body-lead);
  --fs-body: var(--_fs-body);
  --lh-body: var(--_lh-body);
  --fs-body-place: var(--_fs-body-place);
  --lh-body-place: var(--_lh-body-place);
  --fs-body-md: var(--_fs-body-md);
  --fs-chip: var(--_fs-chip);
  --fs-meta: var(--_fs-meta);
  --fs-caption: var(--_fs-caption);
  --fs-label: var(--_fs-label);
}

@media (min-width: 45em) {
  :root {
    --gutter: 40px;
    --plate-height: 84px;
    --plate-logo-height: 28px;
    --field-height: 128px;
    --fs-field: 56px;
    --row-plate-w: 104px;
    --row-plate-h: 60px;
  }
}

@media (min-width: 60em) {
  :root {
    --_fs-h1-hero: 72px;
    --_fs-h1-page: 56px;
    --_fs-h2: 44px;
    --_fs-title-lg: 28px;
    --_fs-title: 22px;
    --_fs-body: 18px;
    --_fs-body-lead: 20px;
    --_fs-body-place: 18px;
    --_fs-meta: 16px;
    --fs-call-number: 42px;
    --section-gap: 72px;
    --masthead-height: 76px;
    --logo-height: 40px;
    --call-height: 96px;
  }
}

/* ---------- The palette, written once -------------------------------------------------------
   ground #111514 · surface #191e1c · raised #232927 · line: bone at 13%
   bone #f4f3ea · muted #a7ada6 · signal #5fdc9a (hover #82e7b3, pressed #49c283) · ink #07140e
   Roles:
   - --color-bg is the page. --color-surface is a panel, used only where something is explained.
     --color-raised is a quiet button. --color-line is every hairline.
   - --color-accent is the signal. It FILLS only the Call button; elsewhere it is a lamp, an icon
     or a 2px underline. It is never a section ground.
   - --color-text-on-accent is the ink set on the signal and on bone plates.
   - --color-logo-plate / --color-bone are the bone plates behind colour brand marks.
   - --color-link is bone: a link is bone text over a signal underline, not coloured text.
   - --color-focus is bone: the ring is 3px of bone, outside the control.
   - --color-danger exists for form errors on pages not yet ported; the size finder's own message
     is bone text and does not use it.
   The logo's rust slash lives in the logo files only and has no token. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #111514;
  --color-bg-raised: #191e1c;
  --color-surface: #191e1c;
  --color-surface-strong: #232927;
  --color-raised: #232927;
  --color-raised-hover: #2c3331;
  --color-raised-press: #1d2321;
  --color-line: rgb(244 243 234 / 0.13);
  --color-text: #f4f3ea;
  --color-text-muted: #a7ada6;
  --color-text-soft: #a7ada6;
  --color-text-faint: #a7ada6;
  --color-text-on-accent: #07140e;
  --color-border: rgb(244 243 234 / 0.13);
  --color-border-strong: #6d756f;
  --color-accent: #5fdc9a;
  --color-accent-hover: #82e7b3;
  --color-accent-press: #49c283;
  --color-accent-soft: #1b2a22;
  --color-lamp-halo: rgb(95 220 154 / 0.2);
  --color-mark: #5fdc9a;
  --color-callout-text: #07140e;
  --color-primary: #5fdc9a;
  --color-primary-hover: #82e7b3;
  --color-primary-contrast: #07140e;
  --color-secondary: #232927;
  --color-secondary-contrast: #f4f3ea;
  --color-link: #f4f3ea;
  --color-focus: #f4f3ea;
  --color-open: #5fdc9a;
  --color-open-contrast: #07140e;
  --color-danger: #f2a391;
  --color-diagram: #f4f3ea;
  --color-diagram-callout: #5fdc9a;
  --color-diagram-fill: #191e1c;
  --color-input-bg: #191e1c;
  --color-input-border: #6d756f;
  --color-hero-band: #111514;
  --color-footer-bg: #111514;
  --color-logo-plate: #f4f3ea;
  --color-logo-plate-text: #07140e;
  --color-logo-dark-plate: #232927;
  --color-media-plate: #f4f3ea;
  --color-backdrop: rgb(7 20 14 / 0.72);
  --media-blend: normal;
  --color-bone: #f4f3ea;
  --color-bone-hover: #ffffff;
  --color-bone-press: #dddcd3;
  --color-on-bone: #07140e;
  --color-muted-on-bone: #4d554f;
  --color-link-on-bone: #07140e;
  --color-green-ground: #1b2a22;
  --color-hairline-2: rgb(244 243 234 / 0.13);
  --color-ink-band: #191e1c;
  --color-ink-deep: #0b0e0d;
  --color-on-ink: #f4f3ea;
  --color-on-ink-muted: #a7ada6;
  --color-on-ink-soft: #a7ada6;
  --color-sage: #a7ada6;
  --color-rule-on-ink: rgb(244 243 234 / 0.13);
  --color-chip-border: rgb(244 243 234 / 0.13);
  --color-chip-border-on-ink: rgb(244 243 234 / 0.13);
  --color-soft-fill: #232927;
  --color-whatsapp: #5fdc9a;
  --color-on-whatsapp: #07140e;
  --color-scrim-top: rgb(17 21 20 / 0.86);
  --color-arc: rgb(95 220 154 / 0.45);
  --color-arc-thin: rgb(244 243 234 / 0.13);
  --color-hero-chip-border: rgb(244 243 234 / 0.13);
  --color-logo-filter: none;
}

/* Arabic. IBM Plex Sans Arabic at its own sizes and leading; no letter-spacing anywhere. Numbers,
   sizes and codes keep Geist and stay left to right (base.css, .num). */
html[lang="ar"] {
  --font-text: var(--font-arabic);
  --font-display: var(--font-arabic);
  --weight-h1: 700;
  --tracking-display: 0;
  --tracking-display-hero: 0;
  --tracking-display-title: 0;

  --fs-h1-hero: 38px;
  --lh-h1-hero: 1.3;
  --fs-h1-page: 32px;
  --lh-h1-page: 1.35;
  --fs-h1: var(--fs-h1-page);
  --lh-h1: var(--lh-h1-page);
  --fs-h1-about: var(--fs-h1-page);
  --lh-h1-about: var(--lh-h1-page);
  --fs-h1-service: var(--fs-h1-page);
  --lh-h1-service: var(--lh-h1-page);
  --fs-h1-place: var(--fs-h1-page);
  --lh-h1-place: var(--lh-h1-page);
  --fs-h2: 28px;
  --lh-h2: 1.35;
  --lh-body: 1.7;
  --lh-body-lead: 1.7;
  --lh-body-place: 1.7;
}

@media (min-width: 60em) {
  html[lang="ar"] {
    --fs-h1-hero: 64px;
    --fs-h1-page: 50px;
    --fs-h2: 40px;
  }
}