:root {
    --color-brand-primary: #0a4fd5;
    --color-brand-secondary: #13151a;
    --color-surface-page: #fff;
    /* --color-surface-page: #f7f5f1; */
    --color-surface-subtle: rgba(255, 255, 255, 0.72);
    --color-surface-panel: rgba(255, 255, 255, 0.853);
    --color-surface-form: #f2f0f0;
    --color-text-primary: #13151a;
    --color-text-secondary: #4f5665;
    --color-text-muted: #7f8798;
    --color-text-inverse: #ffffff;
    --color-border-subtle: rgba(19, 21, 26, 0.08);
    --color-border-strong: rgba(19, 21, 26, 0.12);
    --font-family-body: "Inter", sans-serif;
    --font-family-display: "Inter", sans-serif;
    --font-size-hero-display: clamp(2.7rem, 5.5vw, 5.35rem);
    --line-height-hero-display: 1.01;
    --font-size-hero-supporting: clamp(0.96rem, 1.45vw, 1.06rem);
    --font-size-navigation: 0.95rem;
    --font-size-label-sm: 0.8rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --space-page-gutter: clamp(18px, 3vw, 34px);
    --space-header-block: clamp(10px, 1.2vw, 15px);
    --space-hero-block: clamp(36px, 6vw, 92px);
    --space-hero-gap: clamp(14px, 2.5vw, 26px);
    --container-site: 1320px;
    --container-hero-content: 980px;
    --container-hero-headline: 860px;
    --radius-canvas: 34px;
    --radius-control: 16px;
    --radius-pill: 999px;
    --radius-tile: 12px;
    --border-subtle: 1px solid var(--color-border-subtle);
    --motion-fast: 180ms;
    --motion-base: 280ms;
    --ease-base: cubic-bezier(0.22, 1, 0.36, 1);
    --effect-hero-glow: 0 0 0 1px rgba(10, 79, 213, 0.035), 0 18px 46px rgba(10, 79, 213, 0.1);
    --effect-hero-grid-opacity: 0.24;
}

.dark-theme {
    --color-surface-page: #0f141c;
    --color-surface-subtle: rgba(22, 29, 40, 0.74);
    --color-surface-panel: rgba(17, 24, 34, 0.9);
    --color-text-primary: #f5f7fb;
    --color-text-secondary: rgba(245, 247, 251, 0.8);
    --color-text-muted: rgba(245, 247, 251, 0.62);
    --color-border-subtle: rgba(255, 255, 255, 0.1);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --effect-hero-glow: 0 0 0 1px rgba(10, 79, 213, 0.08), 0 18px 54px rgba(10, 79, 213, 0.18);
}