/* Design tokens — the CSS custom properties are the source of truth (web-conventions). A subset of
   datalayer-gui's Cloudscape-named tokens, so the upstream docs stay a valid reference; the dark
   scheme overrides the same names. Component rules in style.css reference tokens, never raw values. */
:root {
    color-scheme: light dark;

    /* typography */
    --font-family-base: system-ui, sans-serif;
    --font-size-body-s: 12px;     --line-height-body-s: 16px;
    --font-size-body-m: 14px;     --line-height-body-m: 20px;
    --font-size-heading-m: 18px;  --line-height-heading-m: 22px;  --letter-spacing-heading-m: -0.01em;
    --font-size-heading-l: 20px;  --line-height-heading-l: 24px;  --letter-spacing-heading-l: -0.015em;
    --font-size-heading-xl: 24px; --line-height-heading-xl: 30px; --letter-spacing-heading-xl: -0.02em;
    --font-weight-normal: 400;
    --font-weight-heading: 700;
    --font-weight-button: 700;

    /* text */
    --color-text-body-default: #0f141a;
    --color-text-body-secondary: #424650;
    --color-text-heading-default: #0f141a;
    --color-text-column-header: #424650;
    --color-text-empty: #656871;
    --color-text-link-default: #006ce0;
    --color-text-link-hover: #002b66;
    --color-text-button-normal-default: #006ce0;
    --color-text-button-normal-hover: #002b66;
    --color-text-status-error: #db0000;

    /* backgrounds */
    --color-background-layout-main: #ffffff;
    --color-background-container-content: #ffffff;
    --color-background-button-normal-default: #ffffff;
    --color-background-button-normal-hover: #f0fbff;
    --color-background-button-normal-active: #d1f1ff;
    --color-background-item-hover: #f3f3f7;
    --color-background-status-error: #fff5f5;

    /* borders */
    --color-border-divider-default: #c6c6cd;
    --color-border-divider-secondary: #ebebf0;
    --color-border-item-focused: #006ce0;
    --color-border-button-normal-default: #006ce0;
    --color-border-button-normal-hover: #002b66;
    --color-border-status-error: #db0000;

    /* spacing (comfortable density) */
    --space-xxs: 4px;  --space-xs: 8px;   --space-s: 12px;   --space-m: 16px;
    --space-l: 20px;   --space-xl: 24px;  --space-xxl: 32px; --space-xxxl: 40px;
    --space-layout-content-horizontal: 24px;
    --space-button-horizontal: 20px;

    /* sizes, radii, borders */
    --size-vertical-input: 32px;
    --size-top-navigation: 56px;
    --size-content-max: 80rem;
    --size-logo: 32px;
    --size-measure-text: 60ch;
    --border-radius-container: 16px;
    --border-radius-button: 20px;
    --border-radius-alert: 12px;
    --border-radius-control-focus-ring: 4px;
    --border-width-button: 2px;
    --border-width-alert: 2px;
    --border-width-divider: 1px;
    --border-width-focus-ring: 2px;

    /* motion */
    --motion-duration-responsive: 115ms;
    --motion-duration-expressive: 165ms;
}

/* The dark scheme is datalayer-gui's dark top-navigation context promoted to the whole page. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-body-default: #dedee3;
        --color-text-body-secondary: #b4b4bb;
        --color-text-heading-default: #f9f9fa;
        --color-text-column-header: #b4b4bb;
        --color-text-empty: #8c8c94;
        --color-text-link-default: #42b4ff;
        --color-text-link-hover: #75cfff;
        --color-text-button-normal-default: #42b4ff;
        --color-text-button-normal-hover: #75cfff;
        --color-text-status-error: #ff7066;

        --color-background-layout-main: #161d26;
        --color-background-container-content: #1b232d;
        --color-background-button-normal-default: #161d26;
        --color-background-button-normal-hover: #1b232d;
        --color-background-button-normal-active: #232f3e;
        --color-background-item-hover: #1b232d;
        --color-background-status-error: #1f0000;

        --color-border-divider-default: #424650;
        --color-border-divider-secondary: #2f3742;
        --color-border-item-focused: #42b4ff;
        --color-border-button-normal-default: #42b4ff;
        --color-border-button-normal-hover: #75cfff;
        --color-border-status-error: #ff7066;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration-responsive: 0ms;
        --motion-duration-expressive: 0ms;
    }
}