@layer base, legacy;

/* Design tokens: the only file of the new front end that holds raw values.
 *
 * The layer statement above must stay the first rule of the first stylesheet a
 * page links: whichever sheet names the layers first fixes their order.
 * `legacy` beats `base`, and every unlayered rule beats both. Components are
 * unlayered, so a .ui- class always wins; the element reset lives in `base`;
 * from M2, Bootstrap for the old modals lives in `legacy`.
 *
 * Values come from the owner's two landing-page designs, consolidated: the
 * designs use 30 font sizes and nine near-identical creams; these are the
 * steps they collapse onto. Components use var(--ui-...) only.
 */

:root {
  /* Surfaces */
  --ui-color-page: #FBF7F1;
  --ui-color-surface: #FFFDFA;
  --ui-color-sunken: #F4EDE5;
  --ui-color-card: #FFFFFF;
  --ui-color-offer: #F0E4D2;
  --ui-color-band: #4A3B31;
  --ui-color-scrim: rgb(58 48 42 / 0.55); /* dims the page behind the cookie dialog */

  /* Ink on the light surfaces */
  --ui-color-ink: #3A302A;
  --ui-color-ink-soft: #5C5049;
  --ui-color-ink-muted: #6B5F57;
  --ui-color-ink-nav: #4A413A;
  --ui-color-ink-strong: #4A2F10;

  /* On the dark band. Text on the translucent fill uses on-band or on-band-soft
     only: the two lighter creams fall below 4.5:1 there. */
  --ui-color-on-band: #FFF8EC;
  --ui-color-on-band-soft: #EFE1D3;
  --ui-color-on-band-muted: #D8C4B1;
  --ui-color-on-band-faint: #C9AE93;
  --ui-color-on-band-fill: rgb(255 248 236 / 0.12);
  --ui-color-on-band-line: rgb(255 248 236 / 0.16);
  --ui-color-on-band-outline: rgb(255 248 236 / 0.6);

  /* Brand: one colour per studio, and their map dots */
  --ui-color-brand: #7E5120;
  --ui-color-brand-hover: #6A4418;
  --ui-color-brand-2: #3E5C50;
  --ui-color-dot-1: #D9B98F;
  --ui-color-dot-2: #9EBBA8;

  /* Lines */
  --ui-color-line: #EFE7DE;
  --ui-color-line-strong: #E2D8CC;
  --ui-color-line-button: #C9B7A4;

  /* Free places */
  --ui-color-seats-few: #A8412A;
  --ui-color-seats-many: #4C6B3D;

  /* Class tints: background and ink, used in pairs */
  --ui-color-tint-1-bg: #E3EDDD;
  --ui-color-tint-1-ink: #3A5230;
  --ui-color-tint-2-bg: #ECE0D4;
  --ui-color-tint-2-ink: #67441E;
  --ui-color-tint-3-bg: #F0EACB;
  --ui-color-tint-3-ink: #655913;
  --ui-color-tint-4-bg: #DCE7F0;
  --ui-color-tint-4-ink: #28495D;
  --ui-color-tint-5-bg: #F2DFDC;
  --ui-color-tint-5-ink: #77362E;
  --ui-color-tint-6-bg: #E7E1EE;
  --ui-color-tint-6-ink: #4A3B5F;

  /* Focus */
  --ui-color-focus: #7E5120;
  --ui-color-focus-on-band: #FFF8EC;

  /* Type. Headings Onest, text Manrope; system-ui stands in until they load,
     and on legacy pages, which do not load fonts.css. */
  --ui-font-heading: "Onest", system-ui, sans-serif;
  --ui-font-body: "Manrope", system-ui, sans-serif;
  --ui-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Eleven sizes. The three headings grow from a 390 px screen to a 1280 px one. */
  --ui-text-2xs: 0.6875rem;
  --ui-text-xs: 0.78125rem;
  --ui-text-sm: 0.84375rem;
  --ui-text-md: 0.90625rem;
  --ui-text-base: 1rem;
  --ui-text-lg: 1.09375rem;
  --ui-text-xl: 1.1875rem;
  --ui-text-2xl: 1.375rem;
  --ui-text-h3: clamp(1.25rem, 1.141rem + 0.449vw, 1.5rem);
  --ui-text-h2: clamp(1.625rem, 1.488rem + 0.562vw, 1.9375rem);
  --ui-text-h1: clamp(2rem, 1.507rem + 2.022vw, 3.125rem);

  --ui-leading-tight: 1.1;
  --ui-leading-snug: 1.25;
  --ui-leading-normal: 1.5;
  --ui-leading-relaxed: 1.65;

  --ui-weight-regular: 400;
  --ui-weight-medium: 500;
  --ui-weight-semibold: 600;
  --ui-weight-bold: 700;

  --ui-tracking-tight: -0.01em;
  --ui-tracking-eyebrow: 0.12em;

  /* Space */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-7: 2rem;
  --ui-space-8: 2.5rem;
  --ui-space-9: 3.5rem;
  --ui-space-10: 4rem;
  --ui-gutter: clamp(1.125rem, 0.084rem + 4.27vw, 3.5rem);
  --ui-section-pad: clamp(2.125rem, 1.303rem + 3.371vw, 4rem);
  --ui-container: 80rem;

  /* Shape */
  --ui-radius-sm: 0.75rem;
  --ui-radius-md: 0.875rem;
  --ui-radius-lg: 1rem;
  --ui-radius-pill: 999px;
  --ui-shadow-bar: 0 -6px 24px rgb(58 48 42 / 0.08);
  --ui-shadow-raised: 0 14px 36px rgb(44 34 28 / 0.14);

  /* Sizes */
  --ui-touch: 2.75rem;
  --ui-touch-lg: 3rem;
  --ui-header-bar-height: 2.25rem;
  --ui-header-height: 4rem;

  /* Stacking: the consent bar stays below Bootstrap's modal backdrop (1050).
     The consent dialog needs no z-index: showModal() puts it in the top layer. */
  --ui-z-header: 20;
  --ui-z-bar: 30;
  --ui-z-consent: 1040;

  /* Motion */
  --ui-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-duration: 0s;
  }
}