/* HW Framework – Global tokens */
:root {
    --hw-font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --hw-font-heading: "Montserrat", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --hw-font-button: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --hw-font-accent: "Poppins", "Montserrat", sans-serif;

    --hw-color-text: #a3a3a3;
    --hw-color-text-soft: #4c4c4c;
    --hw-color-heading: #111111;
    --hw-color-muted: #a3a3a3;
    --hw-color-primary: #cc2002;
    --hw-color-primary-strong: #b31b00;
    --hw-color-primary-soft: #ffe1dc;
    --hw-color-accent: #f97316;
    --hw-color-surface: #ffffff;
    --hw-color-surface-alt: #f6f6f4;
    --hw-color-border: #e0e0e0;
    --hw-color-focus: #111827;
    --hw-color-link: #cc2002;
    --hw-color-link-strong: #b31b00;

    --hw-radius-2xs: 1px;
    --hw-radius-xs: 0.125rem;
    --hw-radius-sm: 0.25rem;
    --hw-radius-md: 0.5rem;
    --hw-radius-lg: 0.75rem;
    --hw-radius-xl: 1rem;
    --hw-radius-2xl: 1.25rem;
    --hw-radius-3xl: 1.5rem;
    --hw-radius-4xl: 1.75rem;
    --hw-radius-5xl: 2rem;
    --hw-radius-6xl: 2.25rem;
    --hw-radius-pill: 999px;

    --hw-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.08);
    --hw-shadow-md: 0 8px 20px rgba(17, 24, 39, 0.08);
    --hw-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.12);

    --hw-space-2xs: 0.25rem;
    --hw-space-xs: 0.5rem;
    --hw-space-sm: 0.75rem;
    --hw-space-md: 1rem;
    --hw-space-lg: 1.5rem;
    --hw-space-xl: 2rem;
    --hw-space-2xl: 3rem;
    --hw-space-3xl: 4.5rem;

    --hw-layout-width: 1200px;
    --hw-layout-boxed-width: 1080px;
    --hw-layout-gutter: 1rem;

    --hw-transition-base: 200ms ease;
}

[data-layout="boxed"] .container {
    max-width: var(--hw-layout-boxed-width);
}

[data-theme="dark"] {
    color-scheme: dark;
    --hw-color-text: #f1f1f1;
    --hw-color-text-soft: #cccccc;
    --hw-color-heading: #ffffff;
    --hw-color-muted: #6b7280;
    --hw-color-surface: #111827;
    --hw-color-surface-alt: #1f2937;
    --hw-color-border: rgba(249, 250, 251, 0.12);
    --hw-color-focus: #f87171;
}

@media (min-width: 768px) {
    :root {
        --hw-layout-width: 1280px;
        --hw-layout-gutter: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --hw-layout-width: 1360px;
        --hw-layout-gutter: 2rem;
    }
}