/* MatchTide UI Foundation Stage 2: canonical tokens.
   Variables only. Do not attach current page styles in this file. */

html:where(:root) {
    --mt-ui-color-canvas: #ffffff;
    --mt-ui-color-surface: #ffffff;
    --mt-ui-color-text: rgb(5, 8, 6);
    --mt-ui-color-text-secondary: rgb(72, 78, 74);
    --mt-ui-color-text-muted: rgb(114, 123, 116);
    --mt-ui-color-accent: #98ef2f;
    --mt-ui-color-live: #98ef2f;
    --mt-ui-color-warning: #f5a623;
    --mt-ui-color-danger: #ef4444;
    --mt-ui-color-separator: rgba(8, 13, 10, 0.10);
    --mt-ui-color-soft-background: rgba(248, 248, 248, 0.72);
    --mt-ui-color-header: rgb(3, 8, 6);

    --mt-ui-font-family: Helvetica, Arial, sans-serif;
    --mt-ui-font-display: Helvetica, Arial, sans-serif;
    --mt-ui-font-size-display: clamp(54px, 6.3vw, 122px);
    --mt-ui-font-size-h1: clamp(50px, 4.2vw, 64px);
    --mt-ui-font-size-h2: clamp(28px, 2.4vw, 34px);
    --mt-ui-font-size-h3: clamp(18px, 1.6vw, 25px);
    --mt-ui-font-size-body: 14px;
    --mt-ui-font-size-small: 13px;
    --mt-ui-font-size-meta: 12px;
    --mt-ui-font-size-label: 11px;
    --mt-ui-line-height-display: 0.88;
    --mt-ui-line-height-h1: 0.94;
    --mt-ui-line-height-h2: 1;
    --mt-ui-line-height-h3: 1.02;
    --mt-ui-line-height-body: 20px;
    --mt-ui-line-height-small: 18px;
    --mt-ui-line-height-meta: 16px;
    --mt-ui-font-weight-regular: 400;
    --mt-ui-font-weight-medium: 500;
    --mt-ui-font-weight-semibold: 760;
    --mt-ui-font-weight-bold: 900;
    --mt-ui-font-weight-black: 950;

    --mt-ui-space-2xs: 4px;
    --mt-ui-space-xs: 8px;
    --mt-ui-space-sm: 12px;
    --mt-ui-space-md: 16px;
    --mt-ui-space-lg: 24px;
    --mt-ui-space-xl: 32px;
    --mt-ui-space-2xl: 48px;
    --mt-ui-space-3xl: 64px;
    --mt-ui-space-4xl: 96px;
    --mt-ui-page-top: clamp(44px, 7vw, 96px);
    --mt-ui-section-gap: clamp(56px, 6vw, 96px);
    --mt-ui-section-gap-mobile: 42px;
    --mt-ui-masthead-gap: clamp(34px, 5.6vw, 88px);
    --mt-ui-masthead-top: clamp(48px, 7.2vw, 104px);
    --mt-ui-title-display-size: clamp(72px, 8.4vw, 122px);
    --mt-ui-title-page-size: clamp(44px, 4.6vw, 60px);
    --mt-ui-title-entity-size: clamp(44px, 4.6vw, 60px);
    --mt-ui-title-section-size: clamp(28px, 3vw, 44px);
    --mt-ui-lead-size: 16px;
    --mt-ui-lead-hero-size: clamp(16px, 1.25vw, 18px);
    --mt-ui-kicker-tracking: 0.18em;
    --mt-ui-meta-tracking: 0.09em;

    --mt-ui-container-max: 1210px;
    --mt-ui-gutter: 30px;
    --mt-ui-gutter-mobile: 15px;
    --mt-ui-readable-max: 760px;
    --mt-ui-wide-max: 1440px;
    --mt-ui-header-height: var(--mt-shell-header-height, 68px);
    --mt-ui-sticky-offset: var(--mt-ui-header-height);

    --mt-ui-motion-fast: 140ms;
    --mt-ui-motion-normal: 180ms;
    --mt-ui-motion-slow: 260ms;
    --mt-ui-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --mt-ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --mt-ui-radius-sm: 8px;
    --mt-ui-radius-md: 14px;
    --mt-ui-radius-pill: 999px;
}