:root {
    --hcs-color-primary: #3d5cff;
    --hcs-color-primary-strong: #2447df;
    --hcs-color-primary-soft: #eef1ff;
    --hcs-color-ink: #19334c;
    --hcs-color-muted: #63798b;
    --hcs-color-background: #f5f8f7;
    --hcs-color-surface: #ffffff;
    --hcs-color-surface-muted: #f7fafc;
    --hcs-color-border: #dfe8eb;
    --hcs-color-success: #1d7f61;
    --hcs-color-warning: #8a4d00;
    --hcs-color-danger: #b42318;
    --hcs-color-info: #0f6f8f;

    --hcs-font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
    --hcs-font-size-body: 1rem;
    --hcs-line-height-body: 1.5;
    --hcs-line-height-relaxed: 1.75;
    --hcs-font-weight-regular: 400;
    --hcs-font-weight-medium: 500;
    --hcs-font-weight-semibold: 600;
    --hcs-font-weight-bold: 700;
    --hcs-text-xs: .75rem;
    --hcs-text-sm: .875rem;
    --hcs-text-md: 1rem;
    --hcs-text-lg: 1.125rem;
    --hcs-text-xl: 1.25rem;
    --hcs-text-2xl: 1.5rem;
    --hcs-text-3xl: 2rem;

    --hcs-breakpoint-sm: 576px;
    --hcs-breakpoint-md: 768px;
    --hcs-breakpoint-lg: 992px;
    --hcs-breakpoint-xl: 1200px;

    --hcs-space-1: .25rem;
    --hcs-space-2: .5rem;
    --hcs-space-3: .75rem;
    --hcs-space-4: 1rem;
    --hcs-space-5: 1.5rem;
    --hcs-space-6: 2rem;
    --hcs-space-7: 2.5rem;
    --hcs-space-8: 3rem;

    --hcs-content-max-width: 1540px;
    --hcs-page-gutter: clamp(1rem, 3vw, 2.5rem);
    --hcs-control-height: 2.75rem;
    --hcs-control-height-compact: 2.5rem;
    --hcs-touch-target: 2.75rem;
    --hcs-radius-sm: 5px;
    --hcs-radius-md: 8px;
    --hcs-radius-lg: 12px;
    --hcs-shadow-sm: 0 6px 16px rgba(49, 72, 88, .06);
    --hcs-shadow-md: 0 14px 32px rgba(22, 53, 72, .12);
    --hcs-z-base: 0;
    --hcs-z-sticky: 100;
    --hcs-z-overlay: 200;
    --hcs-z-drawer: 250;
    --hcs-z-modal: 300;
    --hcs-z-tooltip: 400;
    --hcs-z-notification: 500;
    --hcs-motion-fast: 150ms;
    --hcs-motion-normal: 220ms;
    --hcs-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --hcs-focus-ring: 0 0 0 .2rem rgba(61, 92, 255, .22);
    --hcs-safe-area-top: env(safe-area-inset-top, 0px);
    --hcs-safe-area-right: env(safe-area-inset-right, 0px);
    --hcs-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --hcs-safe-area-left: env(safe-area-inset-left, 0px);
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--hcs-font-family);
    font-size: var(--hcs-font-size-body);
    line-height: var(--hcs-line-height-body);
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

@media (max-width: 767.98px) {
    :root {
        --hcs-page-gutter: 1rem;
        --hcs-control-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --hcs-motion-fast: 0ms;
        --hcs-motion-normal: 0ms;
        --hcs-motion-ease: linear;
    }

    html {
        scroll-behavior: auto;
    }
}