@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 sits ABOVE Bootstrap's window (1055) and its
     backdrop (1050). It used to be 1040, which put it under both: on a page
     with a window open the bar was dimmed and could not be clicked, so the
     one control that must always be reachable was the one that was not.
     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: 1060;

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

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