/* Measured Tilda roles; prototype-specific motion and layout are in style.css. */
:root {
  --color-page: #fafafe;
  --color-panel: #eeeef4;
  --color-ink: #515366;
  --color-white: #fff;
  --color-header: rgba(81, 83, 102, .64);
  --font-display: 'Unbounded', Arial, sans-serif;
  --font-body: 'Inter Tight', Arial, sans-serif;
  --radius-button: 25px;
  --radius-header: 30px;
  --radius-panel: 24px;
  --content-width: 1440px;
  --page-gutter: clamp(24px, 6.25vw, 96px);
  --content-size: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  --content-inset: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
  --color-muted:#777987;
  --color-line:#51536629;
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --section-space:112px;
  --text-display:clamp(40px,6.15vw,84px);
  --text-heading:clamp(30px,3.4vw,46px);
  --text-card:24px;
}

/* Shared content grid: mobile/tablet content follows the hero inset. */
@media(max-width:1023px){:root{--page-gutter:24px}}

/* UD-01 semantic roles. Opt-in only: no existing page has this class.
   The pre-existing :root values above remain byte-for-byte unchanged. */
.union-ui {
  --ui-space-1: 8px;
  --ui-space-2: 16px;
  --ui-space-3: 24px;
  --ui-space-4: 32px;
  --ui-space-5: 48px;
  --ui-space-6: 64px;
  --ui-section-space: var(--section-space);
  --ui-text-body: 18px;
  --ui-text-small: 14px;
  --ui-text-lead: clamp(18px, 1.5vw, 23px);
  --ui-text-title: clamp(32px, 4.4vw, 64px);
  --ui-text-heading: clamp(26px, 3vw, 42px);
  --ui-text-card: clamp(21px, 2vw, 28px);
  --ui-button-height: 60px;
  --ui-button-padding: 16px 28px;
  --ui-color-hover: #424458;
  --ui-color-soft-hover: #f4f4fa;
  --ui-color-error: #923d46;
  --ui-color-disabled: #e0e1e8;
  --ui-color-menu: #707284;
  --ui-color-header: rgba(81, 83, 102, .9);
  --ui-color-backdrop: #51536680;
  --ui-color-field: #ffffffeb;
  --ui-surface-form: linear-gradient(53deg, #eeeef4, #dddfea 65%, #eeeef4);
  --ui-surface-footer: linear-gradient(110deg, #6f7184, #737589);
  --ui-motion-duration: 300ms;
  --ui-menu-ease: ease-in-out;
  --ui-focus-width: 2px;
  --ui-menu-width: 500px;
  --ui-header-offset: 112px;
}
@media(max-width:700px) {
  .union-ui {
    --ui-section-space: 64px;
    --ui-text-body: 17px;
    --ui-button-height: 52px;
    --ui-button-padding: 15px 24px;
    --ui-header-offset: 96px;
  }
}

/* Designer review: shared component rules, 2026-09-23. */
:root {
 --color-frame: #dfdfe5;
 --border-control: 1px solid var(--color-ink);
 --border-frame: 1px solid var(--color-frame);
 --space-heading-copy: 12px;
 --space-card-copy: 12px;
 --space-button-pair: 12px;
 --select-inline-padding: 16px;
 --media-card-ratio: 3 / 2;
}