:root {
    --ds-font-brand: "Nohemi", "Helvetica Neue", Arial, sans-serif;
    --ds-font-body: var(--ds-font-brand);
    --ds-shell-max-width: 1240px;
    --ds-section-gap: clamp(56px, 7vw, 120px);
    --ds-grid-gap: clamp(18px, 2vw, 30px);
    --ds-radius-2xs: 6px;
    --ds-radius-xs: 12px;
    --ds-radius-sm: 16px;
    --ds-radius-md: 20px;
    --ds-radius-lg: 28px;
    --ds-radius-xl: 36px;
    --ds-radius-pill: 999px;
    --theme-bg: #f0f0f0;
    --theme-text: #121212;
    --theme-muted: #4c4c4c;
    --theme-panel: rgba(255, 255, 255, 0.74);
    --theme-panel-strong: rgba(255, 255, 255, 0.88);
    --theme-border: rgba(255, 255, 255, 0.95);
    --theme-accent: #ff2929;
    --theme-accent-rgb: 255, 41, 41;
    --theme-accent-hover: #e91c1c;
    --theme-accent-soft: rgba(255, 41, 41, 0.12);
    --theme-accent-soft-strong: rgba(255, 41, 41, 0.22);
    --theme-accent-soft-heavy: rgba(255, 41, 41, 0.52);
    --theme-accent-outline: rgba(255, 41, 41, 0.3);
    --theme-selection-text: var(--theme-accent);
    --theme-selection-bg: rgba(18, 18, 18, 0.14);
    --theme-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
    --theme-spot-1: rgba(255, 41, 41, 0.065);
    --theme-spot-2: rgba(255, 98, 98, 0.048);
    --theme-spot-3: rgba(255, 156, 156, 0.042);
    --grain-opacity: 0.042;
    --grain-blend: multiply;
    --grain-size: 420px 420px;
    --bg-spot-1-x: 14%;
    --bg-spot-1-y: 12%;
    --bg-spot-2-x: 84%;
    --bg-spot-2-y: 18%;
    --bg-spot-3-x: 50%;
    --bg-spot-3-y: 88%;
    --bg-spot-4-x: 22%;
    --bg-spot-4-y: 48%;
    --bg-spot-5-x: 80%;
    --bg-spot-5-y: 64%;
    --bg-spot-6-x: 18%;
    --bg-spot-6-y: 78%;
    --bg-spot-7-x: 82%;
    --bg-spot-7-y: 92%;
    --type-display-hero: clamp(58px, 7.3vw, 104px);
    --type-display-hero-accent: clamp(64px, 8vw, 114px);
    --type-page-title: clamp(42px, 4.6vw, 68px);
    --type-section-title: clamp(30px, 3vw, 42px);
    --type-card-title: clamp(22px, 2vw, 30px);
    --type-ui-button: clamp(15px, 1.08vw, 18px);
    --type-body-xl: clamp(20px, 1.7vw, 28px);
    --type-body-lg: clamp(18px, 1.42vw, 21px);
    --type-body: clamp(17px, 1.2vw, 18px);
    --type-label: clamp(14px, 0.98vw, 16px);
    --type-body-sm: clamp(13px, 0.86vw, 15px);
    --type-meta: clamp(12px, 0.78vw, 13px);
    --type-caption: clamp(11px, 0.74vw, 12px);
    --type-micro: clamp(10px, 0.68vw, 11px);
    --weight-hairline: 100;
    --weight-thin: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;
    --ui-btn-padding-y: clamp(12px, 1vw, 14px);
    --ui-btn-padding-x: clamp(18px, 2vw, 30px);
    --ui-btn-min-height: clamp(46px, 4vw, 54px);
    --ui-btn-radius: var(--ds-radius-xs);
    --ui-panel-radius: var(--ds-radius-lg);
    --ui-card-radius: var(--ds-radius-md);
    --ui-input-radius: var(--ds-radius-sm);
    --ui-pill-radius: var(--ds-radius-pill);
}

@media only screen and (max-width: 1024px) {
    :root {
        --ds-section-gap: clamp(48px, 8vw, 88px);
        --ds-grid-gap: clamp(16px, 2.4vw, 24px);
        --type-display-hero: clamp(48px, 8vw, 78px);
        --type-display-hero-accent: clamp(52px, 8.7vw, 84px);
        --type-page-title: clamp(36px, 5.7vw, 52px);
        --type-section-title: clamp(27px, 4vw, 34px);
        --type-card-title: clamp(20px, 2.8vw, 26px);
        --type-ui-button: clamp(15px, 1.9vw, 17px);
        --type-body-xl: clamp(19px, 2.6vw, 24px);
        --type-body-lg: clamp(16px, 2.3vw, 20px);
        --type-body: clamp(15px, 1.8vw, 18px);
        --type-label: clamp(14px, 1.6vw, 16px);
        --type-body-sm: clamp(13px, 1.2vw, 14px);
        --type-meta: clamp(12px, 1.05vw, 13px);
        --type-caption: clamp(11px, 1vw, 12px);
        --type-micro: clamp(10px, 0.9vw, 11px);
        --ui-btn-padding-x: clamp(18px, 3vw, 24px);
        --ds-radius-xs: 11px;
        --ds-radius-sm: 15px;
        --ds-radius-md: 18px;
        --ds-radius-lg: 24px;
        --ds-radius-xl: 30px;
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --ds-shell-max-width: 100%;
        --ds-section-gap: clamp(40px, 11vw, 64px);
        --ds-grid-gap: 16px;
        --type-display-hero: clamp(40px, 11vw, 54px);
        --type-display-hero-accent: clamp(44px, 11.8vw, 60px);
        --type-page-title: clamp(31px, 8.6vw, 42px);
        --type-section-title: clamp(24px, 6.5vw, 30px);
        --type-card-title: clamp(19px, 5.4vw, 23px);
        --type-ui-button: clamp(14px, 4vw, 16px);
        --type-body-xl: clamp(18px, 5vw, 21px);
        --type-body-lg: clamp(15px, 4.3vw, 18px);
        --type-body: clamp(14px, 3.8vw, 15px);
        --type-label: clamp(14px, 3.8vw, 15px);
        --type-body-sm: clamp(13px, 3.4vw, 14px);
        --type-meta: clamp(12px, 3vw, 13px);
        --type-caption: clamp(11px, 2.7vw, 12px);
        --type-micro: clamp(10px, 2.4vw, 11px);
        --ui-btn-padding-y: 12px;
        --ui-btn-padding-x: 18px;
        --ui-btn-min-height: 46px;
        --ds-radius-2xs: 6px;
        --ds-radius-xs: 10px;
        --ds-radius-sm: 13px;
        --ds-radius-md: 16px;
        --ds-radius-lg: 20px;
        --ds-radius-xl: 24px;
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-bg: #050505;
    --theme-text: #e8edf7;
    --theme-muted: #c2cbde;
    --theme-panel: rgba(17, 17, 17, 0.74);
    --theme-panel-strong: rgba(14, 14, 14, 0.88);
    --theme-border: rgba(26, 26, 26, 0.64);
    --theme-accent: #ff2929;
    --theme-accent-rgb: 255, 41, 41;
    --theme-accent-hover: #ff5757;
    --theme-accent-soft: rgba(255, 41, 41, 0.2);
    --theme-accent-soft-strong: rgba(255, 41, 41, 0.32);
    --theme-accent-soft-heavy: rgba(255, 41, 41, 0.6);
    --theme-accent-outline: rgba(255, 122, 122, 0.34);
    --theme-selection-text: var(--theme-accent);
    --theme-selection-bg: rgba(255, 255, 255, 0.16);
    --theme-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);
    --theme-spot-1: rgba(255, 41, 41, 0.11);
    --theme-spot-2: rgba(255, 88, 88, 0.08);
    --theme-spot-3: rgba(255, 154, 154, 0.07);
    --grain-opacity: 0.03;
    --grain-blend: overlay;
}