/* LATVERA lux tokens: the one unit, type roles, space, shape and motion tokens (GRAMMAR §1.3, verbatim).
 * Declared only on the rebuild roots, so the protected zone never reads them. --lux-w is written by lux/primitives.js. */
:where([data-lux], #detailDialog, #galleryDialog, #designStudio, #menuDialog) {
  --lux-u: calc(min(var(--lux-w, 100vw), 1920px) / 1920);
  --lux-su: min(var(--lux-u), calc(100dvh / 1200));
  --lux-unit: var(--lux-u);
  --lux-small-floor: 14px;

  /* grounds and text (§2) */
  --lux-ground: var(--ground);            /* #181717 */
  --lux-panel: var(--ink);                /* #2a2724 */
  --lux-cream: var(--cream);              /* #f4efe7 */
  --lux-taupe: var(--taupe);              /* #b1a696 */
  --lux-hair: var(--hairline);            /* rgba(244,239,231,.2) */
  --lux-chip-dim: rgba(244,239,231,.45);
  --lux-pill-hover: #e8e1d6;
  --lux-dim: rgba(24,23,23,.58);
  --lux-backdrop: rgba(24,23,23,.9);
  --lux-swell: linear-gradient(var(--ground), var(--ink) 50%, var(--ground));
  --lux-scrim-bottom: linear-gradient(to top, rgba(24,23,23,.72), rgba(24,23,23,0) 34%);
  --lux-scrim-top: linear-gradient(to bottom, rgba(24,23,23,.55), rgba(24,23,23,0) 32%);
  --lux-scrim-left: linear-gradient(to right, rgba(24,23,23,.55), rgba(24,23,23,0) 43%);
  --lux-scrim-left-strong: linear-gradient(to right, rgba(24,23,23,.65), rgba(24,23,23,0) 62.5%); /* CONTOUR names only */

  /* type (§3) */
  --lux-fs-mega: clamp(70px, calc(192 * var(--lux-unit)), 165px);
  --lux-fs-name: clamp(64px, calc(107.5 * var(--lux-unit)), 110px);
  --lux-fs-lead: max(23px, calc(48 * var(--lux-unit)));
  --lux-fs-sub: max(20px, calc(34 * var(--lux-unit)));
  --lux-fs-small: max(var(--lux-small-floor), calc(18 * var(--lux-unit)));
  --lux-fs-pill: 14px;
  --lux-fs-menu: clamp(40px, min(calc(107.5 * var(--lux-u)), 9.9dvh), 110px);
  --lux-lh-small: 1.4;

  /* space and shape (§4–§6) */
  --lux-edge: max(32px, calc(40 * var(--lux-unit)));
  --lux-frame: 8px;
  --lux-r-frame: var(--radius);
  --lux-r-nested: max(12px, calc(23 * var(--lux-unit)));
  --lux-r-start: calc(120 * var(--lux-unit));
  --lux-break: max(140px, calc(280 * var(--lux-unit)));
  --lux-close: max(80px, calc(140 * var(--lux-unit)));

  /* motion (§7) */
  --lux-ease-ui: cubic-bezier(.45,0,.55,1);
  --lux-ease-fill: cubic-bezier(.65,0,.35,1);
  --lux-ease-roll: cubic-bezier(.76,0,.24,1);
  --lux-ease-panel: cubic-bezier(.37,0,.63,1);
  --lux-ease-out: cubic-bezier(.33,1,.68,1);
  --lux-ease-quad-out: cubic-bezier(.5,1,.89,1);
  --lux-d-tint: .2s; --lux-d-fast: .3s; --lux-d-base: .5s; --lux-d-panel: .6s; --lux-d-long: .9s;
}
:where(#detailDialog, #galleryDialog, #designStudio, #menuDialog) {
  --lux-unit: var(--lux-su);
  --lux-small-floor: 13px;
  --lux-lh-small: 1.28;
}
@media (max-width:700px) {
  :where([data-lux], #detailDialog, #galleryDialog, #designStudio, #menuDialog) {
    --lux-fs-mega: 17vw; --lux-fs-name: 35px; --lux-fs-lead: 23px; --lux-fs-sub: 20px; --lux-fs-small: 14px;
    --lux-fs-menu: 35px; --lux-edge: 24px; --lux-r-nested: 23px; --lux-r-start: 90px;
    --lux-break: 140px; --lux-close: 80px; --lux-lh-small: 1.29;
  }
}