:root {
    color-scheme: light;
    --hhd-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hhd-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --hhd-font-size-xs: .75rem;
    --hhd-font-size-sm: .875rem;
    --hhd-font-size-md: 1rem;
    --hhd-font-size-lg: 1.125rem;
    --hhd-font-size-xl: clamp(1.25rem, 1.7vw, 1.5rem);
    --hhd-font-size-2xl: clamp(1.65rem, 2.6vw, 2.35rem);
    --hhd-font-size-3xl: clamp(2.35rem, 5.4vw, 5rem);
    --hhd-line-tight: 1.08;
    --hhd-line-title: 1.2;
    --hhd-line-body: 1.62;
    --hhd-weight-regular: 400;
    --hhd-weight-medium: 560;
    --hhd-weight-semibold: 650;
    --hhd-weight-bold: 760;
    --hhd-space-1: .25rem;
    --hhd-space-2: .5rem;
    --hhd-space-3: .75rem;
    --hhd-space-4: 1rem;
    --hhd-space-5: 1.25rem;
    --hhd-space-6: 1.5rem;
    --hhd-space-7: 1.75rem;
    --hhd-space-8: 2rem;
    --hhd-space-10: 2.5rem;
    --hhd-space-12: 3rem;
    --hhd-space-16: 4rem;
    --hhd-radius-xs: .375rem;
    --hhd-radius-sm: .55rem;
    --hhd-radius-md: .8rem;
    --hhd-radius-lg: 1.15rem;
    --hhd-radius-xl: 1.6rem;
    --hhd-radius-pill: 999px;
    --hhd-surface-page: #f4f7fb;
    --hhd-surface-panel: #ffffff;
    --hhd-surface-elevated: #ffffff;
    --hhd-surface-muted: #edf2f7;
    --hhd-surface-subtle: #f8fafc;
    --hhd-surface-selected: #edf3ff;
    --hhd-surface-navigation: #0a1424;
    --hhd-surface-navigation-hover: #15243a;
    --hhd-surface-navigation-active: #203552;
    --hhd-surface-brand: #07111f;
    --hhd-text-primary: #142033;
    --hhd-text-secondary: #526175;
    --hhd-text-tertiary: #738196;
    --hhd-text-inverse: #f7f9fc;
    --hhd-text-inverse-muted: #b9c4d3;
    --hhd-border: #dce3ec;
    --hhd-border-strong: #c5cfdd;
    --hhd-border-subtle: #e9eef5;
    --hhd-accent: #315fe8;
    --hhd-accent-strong: #2046b8;
    --hhd-accent-soft: #e9efff;
    --hhd-action-primary-bg: #315fe8;
    --hhd-action-primary-fg: #ffffff;
    --hhd-action-primary-border: #315fe8;
    --hhd-action-primary-hover-bg: #2046b8;
    --hhd-action-secondary-bg: #ffffff;
    --hhd-action-secondary-fg: #142033;
    --hhd-action-secondary-border: #c5cfdd;
    --hhd-action-disabled-bg: #e7ecf3;
    --hhd-action-disabled-fg: #66758a;
    --hhd-control-height: 2.75rem;
    --hhd-status-info-bg: #eaf1ff;
    --hhd-status-info-fg: #173a7a;
    --hhd-status-info-border: #b8ccff;
    --hhd-status-success-bg: #e8f7ef;
    --hhd-status-success-fg: #0f5132;
    --hhd-status-success-border: #9fd9bd;
    --hhd-status-warning-bg: #fff3dd;
    --hhd-status-warning-fg: #7a4300;
    --hhd-status-warning-border: #f0c77a;
    --hhd-status-error-bg: #ffebe9;
    --hhd-status-error-fg: #8a1c14;
    --hhd-status-error-border: #f2b1ab;
    --hhd-info: #2864dc;
    --hhd-info-soft: #eaf1ff;
    --hhd-success: #18794e;
    --hhd-success-soft: #e8f7ef;
    --hhd-warning: #a35b00;
    --hhd-warning-soft: #fff3dd;
    --hhd-danger: #b42318;
    --hhd-danger-soft: #ffebe9;
    --hhd-critical: #7a1b18;
    --hhd-critical-soft: #ffe1df;
    --hhd-focus: #82a5ff;
    --hhd-overlay: rgba(5, 13, 25, .62);
    --hhd-shadow-xs: 0 1px 2px rgba(17, 31, 51, .05);
    --hhd-shadow-sm: 0 3px 10px rgba(17, 31, 51, .08);
    --hhd-shadow-md: 0 16px 40px rgba(17, 31, 51, .14);
    --hhd-shadow-lg: 0 28px 80px rgba(7, 17, 31, .24);
    --hhd-content-narrow: 980px;
    --hhd-content-max: 1680px;
    --hhd-public-content-max: 1320px;
    --hhd-navigation-center-max: 1180px;
    --hhd-contextual-panel-max: 620px;
    --hhd-header-height: 76px;
    --hhd-z-header: 40;
    --hhd-z-overlay: 1000;
    --hhd-duration-fast: 140ms;
    --hhd-duration-normal: 220ms;
    --hhd-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --hhd-transition-fast: var(--hhd-duration-fast) var(--hhd-ease-standard);
}

html.hhd-theme-dark,
html[data-hhd-resolved-theme="dark"] {
    color-scheme: dark;
    --hhd-surface-page: #0c1420;
    --hhd-surface-panel: #121d2b;
    --hhd-surface-elevated: #172435;
    --hhd-surface-muted: #1b2a3c;
    --hhd-surface-subtle: #101a27;
    --hhd-surface-selected: #1b3159;
    --hhd-surface-navigation: #060c14;
    --hhd-surface-navigation-hover: #142236;
    --hhd-surface-navigation-active: #1f3552;
    --hhd-surface-brand: #050b12;
    --hhd-text-primary: #f2f5f9;
    --hhd-text-secondary: #b2becd;
    --hhd-text-tertiary: #8998ab;
    --hhd-text-inverse: #f7f9fc;
    --hhd-text-inverse-muted: #aeb9c8;
    --hhd-border: #293a50;
    --hhd-border-strong: #3b4e66;
    --hhd-border-subtle: #203044;
    --hhd-accent: #7f9fff;
    --hhd-accent-strong: #a2b7ff;
    --hhd-accent-soft: #1d3158;
    --hhd-action-primary-bg: #6f8df5;
    --hhd-action-primary-fg: #07111f;
    --hhd-action-primary-border: #8da5ff;
    --hhd-action-primary-hover-bg: #91a8ff;
    --hhd-action-secondary-bg: #172435;
    --hhd-action-secondary-fg: #f2f5f9;
    --hhd-action-secondary-border: #3b4e66;
    --hhd-action-disabled-bg: #263548;
    --hhd-action-disabled-fg: #8998ab;
    --hhd-status-info-bg: #1c3156;
    --hhd-status-info-fg: #dbeafe;
    --hhd-status-info-border: #446a9f;
    --hhd-status-success-bg: #163c2c;
    --hhd-status-success-fg: #d1fae5;
    --hhd-status-success-border: #33745a;
    --hhd-status-warning-bg: #49351b;
    --hhd-status-warning-fg: #ffebc1;
    --hhd-status-warning-border: #886230;
    --hhd-status-error-bg: #482522;
    --hhd-status-error-fg: #ffd6d2;
    --hhd-status-error-border: #8c4b46;
    --hhd-info: #8aadff;
    --hhd-info-soft: #1c3156;
    --hhd-success: #63d39b;
    --hhd-success-soft: #163c2c;
    --hhd-warning: #ffc36b;
    --hhd-warning-soft: #49351b;
    --hhd-danger: #ff9188;
    --hhd-danger-soft: #482522;
    --hhd-critical: #ffb0aa;
    --hhd-critical-soft: #55231f;
    --hhd-overlay: rgba(0, 0, 0, .74);
    --hhd-shadow-xs: 0 1px 2px rgba(0, 0, 0, .22);
    --hhd-shadow-sm: 0 4px 12px rgba(0, 0, 0, .3);
    --hhd-shadow-md: 0 18px 44px rgba(0, 0, 0, .38);
    --hhd-shadow-lg: 0 32px 88px rgba(0, 0, 0, .52);
}

*:focus-visible {
    outline: 3px solid var(--hhd-focus);
    outline-offset: 3px;
}

.hhd-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --hhd-duration-fast: 0ms;
        --hhd-duration-normal: 0ms;
        --hhd-transition-fast: 0ms;
    }
}
