/*
 * Design tokens of Luxury Resale Marketplace — the single source of every visual value on this site.
 *
 * Every color, font, radius, shadow, size and duration on the pages is read from here in the
 * browser; no page and no component writes a value of its own. Two themes are two value sets of the
 * same names: the light values are the default, the dark ones apply when the device asks for dark
 * and the reader has not chosen, or when the reader chose dark (data-theme on <html>, nav.js).
 *
 * The names are semantic (what a color is for), so a token reads like a class in the code:
 * --color-muted is the muted text, --color-primary the brand fill. When the product has a token file
 * of its own (globals.css, a theme), the names here mirror it and the header says when it was last
 * copied; a token the product lacks is marked "proposed" and listed on the Foundations page.
 *
 * Design direction: Atelier (decision 2026-10-29, design-references/2026-10-29-atelier-direction), scheme B —
 * Atelier Green & Brass (SC-002), type pairing A — Cormorant Garamond for display, Inter for text (SC-020).
 * Ivory page, bottle-green brand (ivory in dark), brass only in hairlines, the focus ring and the seal; soft
 * shapes 10 / 12 / 16 / 24 px, form buttons on the control radius, pill chips; cards a hairline and a long soft shadow; the brand
 * panel of the sign-in stone in light and green in dark. "Passed" is teal so it never reads as the brand.
 *
 * As built (SC-033, LRM-372): the colours, shadows and scene values are machine-copied from the clients' dev branches by
 * tools/syncTokens.mjs — lrm-web src/design-system/tokens.css into :root and the dark blocks, lrm-admin
 * src/styles/tokens.css into the override block at the end of this file — so run that script, do not type them. The scales
 * follow the same files by hand (theme.css, the admin's @theme) and lrm-mobile src/theme/tokens.ts for the phone block.
 * lrm-mobile's scripts/gen-tokens.mjs reads this file (the :root block, the explicit dark block and the phone block).
 */
:root {
  /* Typefaces — pairing A, proposed (pick at the gate). Every family covers Latin and Cyrillic, the
     site and the product being English and Ukrainian. Display: titles, item names, the certificate;
     never numbers, never under 20 px (lrm-web, lrm-admin). Sans: everything else, prices included (tabular figures). */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Pairing B, the alternative: loaded only so the Typography page shows it beside A
     (base.css › [data-type-pairing='b']). Remove with its link in site.mjs once A or B is picked. */
  --font-display-alt: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans-alt: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Size ramp: each size with its line height, on the 4 px grid */
  --text-2xs: 11px;
  --leading-2xs: 16px;
  --text-xs: 12px;
  --leading-xs: 16px;
  --text-sm: 14px;
  --leading-sm: 20px;
  --text-base: 16px;
  --leading-base: 24px;
  --text-lg: 18px;
  --leading-lg: 24px;
  --text-xl: 24px;
  --leading-xl: 28px;
  --text-2xl: 28px;
  --leading-2xl: 36px;
  --text-3xl: 34px;
  --leading-3xl: 40px;
  --text-4xl: 52px;
  --leading-4xl: 56px;

  /* Text styles (base.css › .t-*): the ramp put to work. The display face runs small for its size, so
     its styles sit a step above the sans ones. */
  --text-display: var(--text-4xl);
  --leading-display: var(--leading-4xl);
  --tracking-display: -0.01em;
  --weight-display: var(--weight-medium);
  --text-page-title: 40px; /* Atelier: a screen's title 40/44 from md up, 32/36 on a phone */
  --leading-page-title: 44px;
  --tracking-page-title: -0.01em;
  --text-section-title: var(--text-xl);
  --leading-section-title: var(--leading-xl);
  --weight-title: var(--weight-semibold);
  --text-card-title: 20px; /* in the display face (a listing card's title) */
  --leading-card-title: var(--leading-xl);
  --text-body: 15px; /* Atelier: running text 15/24 */
  --leading-body: var(--leading-base);
  --text-small: var(--text-xs);
  --leading-small: var(--leading-xs);
  --text-label: 12px; /* the eyebrow over a title: 12 px capitals at .14em, on a phone too */
  --leading-label: 16px;
  --tracking-label: 0.14em;
  --text-figure: var(--text-2xl);
  --leading-figure: var(--leading-2xl);
  --tracking-figure: -0.01em;
  --text-figure-sm: var(--text-lg);
  --leading-figure-sm: var(--leading-lg);
  --text-mono: var(--text-xs);
  --leading-mono: var(--leading-xs);

  /* Surfaces: the ivory page; surface is raised (a card, a field's ground, the header); muted a quiet fill */
  --color-page: #f6f2ea;
  --color-surface: #fffdf8;
  --color-surface-muted: #efe9de;
  --color-surface-inverted: #1c2421;
  --color-overlay: rgb(17 23 21 / 0.5);
  --color-device: #23211e; /* the bezel of a phone or tablet frame on the showcase */

  /* Text: ≥ 4.5:1 on page, surface and muted in both themes */
  --color-foreground: #1c2421;
  --color-muted: #5e665f;
  --color-subtle: #5e665f;
  --color-inverted: #f6f2ea;

  /* Borders and focus: the stone hairline; emphasis keeps 3:1 for a control's edge (WCAG 1.4.11); the focus
     ring is brass, the darker light brass keeping it ≥ 3:1 on ivory */
  --color-default: #e7e0d3;
  --color-emphasis: #8c8678;
  --color-ring: #a8864a;

  /* Brand: bottle green; in dark the main button turns ivory. The soft tint carries a selected row or a chip;
     the strong text is the brand color dark enough to read on the soft tint. */
  --color-primary: #1f2e28;
  --color-primary-hover: #263a32;
  --color-primary-foreground: #f6f2ea;
  --color-primary-soft: #e3eae4;
  --color-primary-strong: #1f2e28;

  /* A logo is drawn in currentColor with its knockouts in the color behind it. This is that color on
     the page; whatever puts a mark on another color sets it again (the brand tile: --color-primary). */
  --lg-ground: var(--color-surface);

  /* Feedback: the solid color is for icons, bars and filled buttons; the soft tint carries text in
     the -text color, the -border outlines an alert. Every -text on its -soft meets WCAG AA in both themes. */
  --color-danger: #a2362b;
  --color-danger-hover: #8a2c22;
  --color-danger-foreground: #ffffff;
  --color-danger-soft: #f7e5e2;
  --color-danger-text: #a2362b;
  --color-danger-border: #e0b3ad;
  --color-success: #2d6a7a;
  --color-success-foreground: #ffffff;
  --color-success-soft: #e2eef1;
  --color-success-text: #2d6a7a;
  --color-warning: #9c6610;
  --color-warning-foreground: #ffffff;
  --color-warning-soft: #f6eedc;
  --color-warning-text: #8a5d0c;
  --color-warning-border: #e3cc9f;
  --color-info: #2f5c8a;
  --color-info-foreground: #ffffff;
  --color-info-soft: #e4ecf5;
  --color-info-text: #2f5c8a;

  /* Brass: hairlines, the divider, the seal, the focus ring. Never text under 18 px, never the fill of a
     button. */
  --color-accent: #a8864a;
  --color-accent-soft: #f1e8d6;

  /* The brand panel of the signed-out screens: warm stone with a pale glow under the dome in light, bottle
     green with a lighter green glow in dark; its line art green in light, ivory in dark */
  --color-panel: #e9e2d4;
  --color-panel-glow: #fbf8f2;
  --color-panel-foreground: #1f2e28;
  --color-panel-accent: #a8864a;

  /* The editorial header's thin top line (LRM-332): ivory on ink in light; in dark the page's near-black, a
     shade under the header's raised surface */
  --color-band: #1c2421;
  --color-band-foreground: #f6f2ea;

  /* Fields: filled with stone over the raised surface; the edge is the emphasis border, so a field's outline keeps
     3:1 against the card in both themes (WCAG 1.4.11; LRM-351 admin, LRM-357 web). The phone keeps its hairline. */
  --color-field-fill: #f5f1e9;
  --color-field-border: var(--color-emphasis);

  /* The back office's chrome (its sidebar and top bar): the admin's own surface, set in the override block at the end */
  --color-chrome: var(--color-surface);

  /* Item categories (placeholders until Q-010 names them), away from the brand and feedback tones */
  --color-category-1: #6e4a7e;
  --color-category-2: #9a5f24;
  --color-category-3: #3e5f8a;

  /* Illustrations of the states (empty, 404, no access; assets/illustrations.js): fine lines of --ill-line on
     flat planes, brass for what is proven, paper and soft tints behind */
  --ill-line: #1f2e28;
  --ill-fill: #efe9de;
  --ill-soft: #e3eae4;
  --ill-paper: #fffdf8;
  --ill-accent: #a8864a;
  --ill-accent-soft: #f1e8d6;

  /* The panel scenes in "enhanced line" (assets/illustrations.js › scene-*): the panel's line, three planes,
     the dome's light, brass, paper. Steel and the dial keep fixed metal tones, the same in both themes. */
  --scene-ink: var(--color-panel-foreground);
  --scene-brass: var(--color-panel-accent);
  --scene-plane-1: #e2dacb;
  --scene-plane-2: #d6cdba;
  --scene-plane-3: #efe9dd;
  --scene-dome: #fbf8f2;
  --scene-light: #ffffff;
  --scene-paper: #fffdf8;
  --scene-paper-ink: #1f2e28;
  --scene-check: #fffdf8;
  --scene-strap: #c9bfab;
  --scene-shadow: #5e5440;
  --scene-grain: rgb(0 0 0 / 0.06);
  --scene-steel-1: #f3eee4;
  --scene-steel-2: #b9bdb4;
  --scene-steel-3: #4c5c54;
  --scene-steel-dark: #1d2e27;
  --scene-steel-light: #d9d4c8;
  --scene-dial-1: #3e5a4d;
  --scene-dial-2: #22362d;
  --scene-dial-3: #14201b;

  /* Elevation: a hairline and a soft long shadow. Card: at rest. Raised: lifted on hover, a menu, a
     popover. Overlay: a dialog, a drawer, a toast, the sign-in card. */
  --shadow-card: 0 24px 48px -28px rgb(17 23 21 / 0.35);
  --shadow-raised: 0 32px 56px -28px rgb(17 23 21 / 0.45);
  --shadow-overlay: 0 2px 6px 0 rgb(17 23 21 / 0.04), 0 32px 64px -28px rgb(17 23 21 / 0.35);

  /* Radii, soft (Atelier): box (a checkbox), control (fields, small controls), button (a form button: the same control
     radius on web and admin since LRM-351/357; a pill on the phone, below), image (a photo inside a card), card (cards,
     tables), overlay (dialogs, popovers, the sign-in card), full (chips, badges, avatars — the pills) */
  --radius-box: 6px;
  --radius-control: 10px;
  --radius-button: var(--radius-control);
  --radius-image: 12px;
  --radius-card: 16px;
  --radius-overlay: 24px;
  --radius-full: 9999px;

  /* Layout: the shell */
  --size-sidebar: 240px;
  --size-header: 56px;
  --size-form: 384px;
  --size-page: 1280px; /* the widest the content grows */
  --size-prose: 680px; /* the longest line of running text */
  --size-dialog: 480px;
  --size-drawer: 400px;

  /* Controls: one standard on web and admin (LRM-351, LRM-357; the names of the clients in brackets). md is every input,
     Select and button by default (--control-height-md), sm a chip, a table row's action, the pager. lg is the admin's
     rare emphasised action; the web has no lg. The phone keeps larger touch targets (the phone block below). */
  --size-control: 40px;
  --size-control-sm: 32px;
  --size-control-lg: 44px;
  --size-touch: 44px; /* the smallest target a finger is given */
  --size-field: 40px; /* a text field stands level with its button */
  --size-field-max: 420px; /* the widest a field grows (--field-max-width) */
  --size-menu-max: 288px; /* the tallest an open Select's list grows before it scrolls (--spacing-menu) */
  --padding-control: 12px; /* a field's inside (--control-padding-x) */
  --padding-button: 16px; /* a button's inside (--button-padding-x-md) */
  --padding-button-sm: 12px; /* --button-padding-x-sm */
  --padding-button-lg: 20px; /* --button-padding-x-lg, admin only */
  --padding-form-card: 24px; /* a form card's inside; 16 under 640 px (--form-card-padding) */
  --padding-form-card-sm: 16px;
  --gap-field: 16px; /* field to field (--field-gap) */
  --gap-label: 6px; /* label to field, field to hint (--field-label-gap) */
  --text-control: 14px; /* a field's text; 16 under 640 px on the web, so iOS does not zoom (--control-font-size) */
  --leading-control: 20px;
  --text-field-label: 13px; /* a field's label, medium (text-label) */
  --leading-field-label: 18px;

  /* The editorial header of the web (LRM-332): the dark top line, the masthead from md up, the account menu's width */
  --size-topline: 32px;
  --size-masthead: 72px;
  --size-account-menu: 256px;
  /* Back-office shell: the column and the top bar (lrm-admin h-header 64, w-sidebar 256) */
  --size-admin-sidebar: 256px;
  --size-admin-header: 64px;
  /* Admin tables, compact (LRM-351) */
  --table-cell-x: 10px;
  --table-cell-y: 8px;
  --table-head-y: 10px;
  --table-thumb: 32px;
  --filter-bar-padding: 12px;
  /* An empty results area and its scene: the catalogue 448 and 320 on the web, a table 320 and 240 on the admin */
  --size-results-min: 448px;
  --size-scene-empty: 320px;
  --size-panel-scene: 420px; /* a panel scene beside the form; 220 in a phone's band */
  --size-panel-overlap: 24px; /* how far the form card rides over a phone's band */

  /* Icons: 16 on the web with a 1.75 line; 24 and the phone's icons take the finer 1.5 */
  --icon-stroke-web: 1.75;
  --icon-stroke-lg: 1.5;
  --icon-size-phone: 15px;

  /* Grid: 12 columns; the gutter and the page's margin narrow on a phone */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-gutter-sm: 16px;
  --grid-margin: 32px;
  --grid-margin-sm: 16px;

  /* Breakpoints: the widths the layout changes at. A media query cannot read a custom property, so
     these name the numbers the queries write. */
  --breakpoint-sm: 640px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1440px;

  /* Layering */
  --z-menu: 5;
  --z-header: 10;
  --z-modal: 50;
  --z-toast: 60;

  /* Motion: calm. Things ease in and settle; nothing bounces or overshoots. Fast: hover, focus,
     color. Base: a toggle, a tab, a row opening. Slow: a dialog, a drawer, a toast. Slower: the
     seal of a certificate drawing once. */
  --duration-fast: 200ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --duration-slower: 640ms;
  --duration-spin: 800ms; /* one turn of a spinner */
  --duration-loader: 1600ms; /* one cycle of a loader drawn from the logo (components.css › Loader) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* moves within the screen */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* arrives, and settles slowly */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* leaves, gathering speed */

  /* The panel scenes and their carousel (the approved preview, as lrm-web and lrm-mobile built it): about 6 s a
     scene; the shown scene and its copy leave fully (fade, a 6 px rise, a blur; a plain quick fade with reduced
     motion) before the next draws its lines in; its planes settle, the light comes up, the seal stamps in last;
     the brass rule grows, the copy rises line by line; then a slow idle loop. All in ms, so a script reads them. */
  --duration-scene-interval: 6000ms;
  --duration-scene-leave: 550ms;
  --duration-scene-leave-quick: 150ms;
  --duration-scene-draw: 1200ms;
  --duration-scene-fade: 900ms;
  --duration-seal: 700ms;
  --duration-rule: 700ms;
  --duration-copy-line: 800ms;
  --duration-sway: 7000ms;
  --duration-pulse: 5000ms;
  --duration-float: 6000ms;
  --duration-glow: 7000ms;
  --duration-lift: 400ms; /* a card lifting on hover, its photo leaning in */
  --delay-draw-2: 250ms;
  --delay-draw-3: 450ms;
  --delay-scene-fade: 350ms;
  --delay-scene-light: 600ms;
  --delay-seal: 1150ms;
  --delay-rule: 500ms;
  --delay-copy-line: 750ms;
  --stagger-copy-line: 200ms;
  --delay-idle: 1400ms;
  --ease-draw: cubic-bezier(0.3, 0.6, 0.2, 1); /* a line drawing itself in */
  --ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1); /* the rule, a line of copy settling (lrm-web, lrm-admin --ease-scene) */
  --ease-seal: cubic-bezier(0.2, 0.8, 0.2, 1); /* the seal stamping in (lrm-admin, lrm-mobile settle) */
  --ease-sway: cubic-bezier(0.45, 0, 0.55, 1); /* the idle loops */
  /* How far and how much: a scene leaving, the copy rising, the object floating, the lamp swaying, the seal
     stamping in, the light pulsing, a card lifting and its photo leaning in */
  --motion-leave: -6px;
  --motion-copy-line: 10px;
  --motion-float: -2.5px;
  --motion-sway: -3deg;
  --motion-seal-scale: 0.55;
  --motion-seal-turn: -25deg;
  --motion-pulse: 0.62;
  --motion-glow: 0.4;
  --motion-lift: -2px;
  --motion-zoom: 1.03;
  --blur-leave: 3px;

  /* The 4 px spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  color-scheme: light;
}

/* ── Dark: the device asks for it and the reader has not chosen, or the reader chose it ── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-page: #111715;
    --color-surface: #1e2824;
    --color-surface-muted: #18201d;
    --color-surface-inverted: #f1ece2;
    --color-overlay: rgb(0 0 0 / 0.7);
    --color-device: #3a403d;

    --color-foreground: #f1ece2;
    --color-muted: #a7aca4;
    --color-subtle: #a7aca4;
    --color-inverted: #111715;

    --color-default: rgb(246 242 234 / 0.08);
    --color-emphasis: #6e7a74;
    --color-ring: #c2a266;

    --color-primary: #ede4d0;
    --color-primary-hover: #f6efdf;
    --color-primary-foreground: #111715;
    --color-primary-soft: #1f2c27;
    --color-primary-strong: #d3e6db;

    --color-danger: #ee8e83;
    --color-danger-hover: #f3a69d;
    --color-danger-foreground: #2a0d0a;
    --color-danger-soft: #2e1b19;
    --color-danger-text: #ee8e83;
    --color-success: #86c6d4;
    --color-success-foreground: #0e2228;
    --color-success-soft: #14252a;
    --color-success-text: #86c6d4;
    --color-warning: #e0b866;
    --color-warning-foreground: #2a2214;
    --color-warning-soft: #2a2214;
    --color-warning-text: #e0b866;
    --color-info: #8db5e0;
    --color-info-foreground: #172231;
    --color-info-soft: #172231;
    --color-info-text: #8db5e0;
    --color-accent: #c2a266;
    --color-accent-soft: #2a2418;
    --color-category-1: #c1a0d1;
    --color-category-2: #dda46a;
    --color-category-3: #9db8dc;
    --ill-line: #d3e6db;
    --ill-fill: #1e2824;
    --ill-soft: #1f2c27;
    --ill-paper: #18201d;
    --ill-accent: #c2a266;
    --ill-accent-soft: #2a2418;
    --color-danger-border: #6b3a35;
    --color-warning-border: #6a5530;
    --color-panel: #1f2e28;
    --color-panel-glow: #263a32;
    --color-panel-foreground: #f1ece2;
    --color-panel-accent: #c2a266;
    --color-band: #111715;
    --color-band-foreground: #f1ece2;
    --color-field-fill: #18201d;
    --color-field-border: var(--color-emphasis);
    --scene-plane-1: #24352e;
    --scene-plane-2: #2c4038;
    --scene-plane-3: #36493f;
    --scene-dome: #43584e;
    --scene-light: #f1ece2;
    --scene-paper: #ede6d8;
    --scene-check: #1f2e28;
    --scene-strap: #3e5148;
    --scene-shadow: #0b1210;
    --scene-grain: rgb(255 255 255 / 0.07);

    --shadow-card: 0 24px 48px -28px rgb(0 0 0 / 0.7);
    --shadow-raised: 0 32px 56px -28px rgb(0 0 0 / 0.8);
    --shadow-overlay: 0 2px 6px 0 rgb(0 0 0 / 0.3), 0 32px 64px -28px rgb(0 0 0 / 0.75);

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --color-page: #111715;
  --color-surface: #1e2824;
  --color-surface-muted: #18201d;
  --color-surface-inverted: #f1ece2;
  --color-overlay: rgb(0 0 0 / 0.7);
  --color-device: #3a403d;

  --color-foreground: #f1ece2;
  --color-muted: #a7aca4;
  --color-subtle: #a7aca4;
  --color-inverted: #111715;

  --color-default: rgb(246 242 234 / 0.08);
  --color-emphasis: #6e7a74;
  --color-ring: #c2a266;

  --color-primary: #ede4d0;
  --color-primary-hover: #f6efdf;
  --color-primary-foreground: #111715;
  --color-primary-soft: #1f2c27;
  --color-primary-strong: #d3e6db;

  --color-danger: #ee8e83;
  --color-danger-hover: #f3a69d;
  --color-danger-foreground: #2a0d0a;
  --color-danger-soft: #2e1b19;
  --color-danger-text: #ee8e83;
  --color-success: #86c6d4;
  --color-success-foreground: #0e2228;
  --color-success-soft: #14252a;
  --color-success-text: #86c6d4;
  --color-warning: #e0b866;
  --color-warning-foreground: #2a2214;
  --color-warning-soft: #2a2214;
  --color-warning-text: #e0b866;
  --color-info: #8db5e0;
  --color-info-foreground: #172231;
  --color-info-soft: #172231;
  --color-info-text: #8db5e0;
  --color-accent: #c2a266;
  --color-accent-soft: #2a2418;
  --color-category-1: #c1a0d1;
  --color-category-2: #dda46a;
  --color-category-3: #9db8dc;
  --ill-line: #d3e6db;
  --ill-fill: #1e2824;
  --ill-soft: #1f2c27;
  --ill-paper: #18201d;
  --ill-accent: #c2a266;
  --ill-accent-soft: #2a2418;
  --color-danger-border: #6b3a35;
  --color-warning-border: #6a5530;
  --color-panel: #1f2e28;
  --color-panel-glow: #263a32;
  --color-panel-foreground: #f1ece2;
  --color-panel-accent: #c2a266;
  --color-band: #111715;
  --color-band-foreground: #f1ece2;
  --color-field-fill: #18201d;
  --color-field-border: var(--color-emphasis);
  --scene-plane-1: #24352e;
  --scene-plane-2: #2c4038;
  --scene-plane-3: #36493f;
  --scene-dome: #43584e;
  --scene-light: #f1ece2;
  --scene-paper: #ede6d8;
  --scene-check: #1f2e28;
  --scene-strap: #3e5148;
  --scene-shadow: #0b1210;
  --scene-grain: rgb(255 255 255 / 0.07);

  --shadow-card: 0 24px 48px -28px rgb(0 0 0 / 0.7);
  --shadow-raised: 0 32px 56px -28px rgb(0 0 0 / 0.8);
  --shadow-overlay: 0 2px 6px 0 rgb(0 0 0 / 0.3), 0 32px 64px -28px rgb(0 0 0 / 0.75);

  color-scheme: dark;
}

/* A field's text and a form card's inside on a narrow browser (lrm-web, tokens.css): 16 px text so iOS does not zoom,
   a 16 px inside. Not inside a phone frame: that is the app's own scale, below. */
@media (max-width: 639px) {
  :root {
    --text-control: 16px;
    --padding-form-card: var(--padding-form-card-sm);
  }
}

/* ── Phone: the compact scale ──
   A phone is held at a third of a desktop's distance, so its type, controls and lines run a step
   smaller than the web's: body 14/22, a row 14, titles in the display face at 26 (lrm-mobile's phone scale). Everything drawn inside
   a phone frame reads its sizes from here; the touch target stays 44. The role tokens are set again
   because a var() is resolved where it is declared, not where it is read. */
:where(.device--phone, .st-phone, .ab-phone-scale) {
  --text-2xs: 10px;
  --leading-2xs: 14px;
  --text-xs: 11px;
  --leading-xs: 15px;
  --text-sm: 13px;
  --leading-sm: 18px;
  --text-base: 14px;
  --leading-base: 20px;
  --text-lg: 15px;
  --leading-lg: 22px;
  --text-xl: 18px;
  --leading-xl: 24px;
  --text-2xl: 22px;
  --leading-2xl: 28px;
  --text-3xl: 26px;
  --leading-3xl: 32px;
  --text-4xl: 32px;
  --leading-4xl: 36px;

  --text-display: var(--text-4xl);
  --leading-display: var(--leading-4xl);
  --text-page-title: var(--text-3xl);
  --leading-page-title: var(--leading-3xl);
  --text-section-title: 20px;
  --leading-section-title: 26px;
  --text-card-title: 20px;
  --leading-card-title: var(--leading-xl);
  --text-body: var(--text-base);
  --leading-body: var(--leading-lg); /* 14/22, as lrm-mobile */
  --text-small: var(--text-sm);
  --leading-small: var(--leading-sm);
  --text-figure: var(--text-2xl);
  --leading-figure: var(--leading-2xl);
  --text-figure-sm: var(--text-lg);
  --leading-figure-sm: var(--leading-lg);
  --text-mono: var(--text-xs);
  --leading-mono: var(--leading-xs);

  /* A tighter rhythm: the four steps a phone's rows and cards are made of, each a little smaller */
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 20px;

  --size-header: 52px;
  --size-control: 40px;
  --size-control-sm: 32px;
  --size-control-lg: 44px;
  --size-field: 44px;
  --size-panel-scene: 220px;
  --radius-button: var(--radius-full); /* lrm-mobile's buttons stay pills */
  --color-field-border: var(--color-default); /* and its fields a hairline edge */
  --padding-control: 14px;
  --padding-button: 18px;
  --padding-form-card: 18px;
  --gap-field: 12px;
  --gap-label: 6px;
  --text-control: 14px;
  --leading-control: 20px;
  --text-field-label: 13px;
  --leading-field-label: 18px;

  --icon-size: var(--icon-size-phone); /* the base icon inside a phone; 16 on the web */
  --icon-stroke: var(--icon-stroke-lg);
  --ill-stroke-compact: 1.15; /* a picture's line on a phone: finer, so it reads drawn, not printed */
}

/* sync:admin:start — written by tools/syncTokens.mjs from lrm-admin src/styles/tokens.css; do not edit by hand.
   Everything drawn as the back office (.app--admin) reads the admin's own values where they differ from the web. */
:where(.app--admin) {
  --color-chrome: #fbf8f2;
  --color-surface-muted: #efe9dd;
  --color-field-fill: rgb(231 224 211 / 0.4);
  --color-overlay: rgb(17 23 21 / 0.45);
  --color-subtle: #646b64;
  --color-emphasis: #8c8273;
  --color-primary-hover: #2b3f37;
  --color-primary-soft: #e6e9e0;
  --color-accent-soft: #f1e9da;
  --color-danger-foreground: #fffdf8;
  --color-success-foreground: #fffdf8;
  --color-success-text: #2a6272;
  --color-warning-foreground: #fffdf8;
  --color-warning-text: #7f550a;
  --color-info-foreground: #fffdf8;
  --shadow-card: 0 1px 2px 0 rgb(17 23 21 / 0.04), 0 24px 48px -28px rgb(17 23 21 / 0.35);
  --shadow-raised: 0 2px 6px -2px rgb(17 23 21 / 0.08), 0 28px 56px -24px rgb(17 23 21 / 0.42);
  --shadow-overlay: 0 4px 12px -4px rgb(17 23 21 / 0.1), 0 32px 64px -24px rgb(17 23 21 / 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) :where(.app--admin) {
    --color-chrome: #18201d;
    --color-surface-muted: #263230;
    --color-field-fill: rgb(246 242 234 / 0.05);
    --color-overlay: rgb(0 0 0 / 0.6);
    --color-subtle: #989e96;
    --color-primary: #f1ece2;
    --color-primary-hover: #fbf8f2;
    --color-primary-foreground: #1f2e28;
    --color-primary-soft: #24352e;
    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 24px 48px -28px rgb(0 0 0 / 0.7);
    --shadow-raised: 0 2px 6px -2px rgb(0 0 0 / 0.4), 0 28px 56px -24px rgb(0 0 0 / 0.75);
    --shadow-overlay: 0 4px 12px -4px rgb(0 0 0 / 0.45), 0 32px 64px -24px rgb(0 0 0 / 0.8);
  }
}
:where(:root[data-theme='dark'] .app--admin) {
  --color-chrome: #18201d;
  --color-surface-muted: #263230;
  --color-field-fill: rgb(246 242 234 / 0.05);
  --color-overlay: rgb(0 0 0 / 0.6);
  --color-subtle: #989e96;
  --color-primary: #f1ece2;
  --color-primary-hover: #fbf8f2;
  --color-primary-foreground: #1f2e28;
  --color-primary-soft: #24352e;
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 24px 48px -28px rgb(0 0 0 / 0.7);
  --shadow-raised: 0 2px 6px -2px rgb(0 0 0 / 0.4), 0 28px 56px -24px rgb(0 0 0 / 0.75);
  --shadow-overlay: 0 4px 12px -4px rgb(0 0 0 / 0.45), 0 32px 64px -24px rgb(0 0 0 / 0.8);
}
/* sync:admin:end */