/* Design tokens — the CSS projection of tokens.json (Cloudscape visual refresh, light, comfortable).
   Component rules reference these, never raw values. Names follow the Cloudscape token names
   without their hash suffixes, so the upstream docs stay a valid reference. */
:root {
    /* typography */
    --font-family-base: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
    --font-family-monospace: Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace;
    --font-size-body-s: 12px;   --line-height-body-s: 16px;   --letter-spacing-body-s: 0.005em;
    --font-size-body-m: 14px;   --line-height-body-m: 20px;
    --font-size-heading-xs: 14px; --line-height-heading-xs: 18px;
    --font-size-heading-s: 16px;  --line-height-heading-s: 20px;  --letter-spacing-heading-s: -0.005em;
    --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-size-display-l: 42px;  --line-height-display-l: 48px;  --letter-spacing-display-l: -0.03em;
    --font-weight-normal: 400;
    --font-weight-heading: 700;
    --font-weight-button: 700;
    --font-button-letter-spacing: 0.005em;

    /* text */
    --color-text-body-default: #0f141a;
    --color-text-body-secondary: #424650;
    --color-text-heading-default: #0f141a;
    --color-text-label: #0f141a;
    --color-text-counter: #656871;
    --color-text-empty: #656871;
    --color-text-form-secondary: #656871;
    --color-text-input-placeholder: #656871;
    --color-text-breadcrumb-current: #656871;
    --color-text-breadcrumb-icon: #8c8c94;
    --color-text-interactive-default: #424650;
    --color-text-interactive-hover: #0f141a;
    --color-text-interactive-disabled: #b4b4bb;
    --color-text-disabled: #b4b4bb;
    --color-text-column-header: #424650;
    --color-text-inverted: #ffffff;
    --color-text-notification-default: #f9f9fa;
    --color-text-accent: #006ce0;
    --color-text-link-default: #006ce0;
    --color-text-link-hover: #002b66;
    --color-text-button-normal-default: #006ce0;
    --color-text-button-normal-hover: #002b66;
    --color-text-button-primary-default: #ffffff;
    --color-text-status-error: #db0000;
    --color-text-status-success: #00802f;
    --color-text-status-warning: #855900;
    --color-text-status-info: #006ce0;
    --color-text-status-inactive: #656871;

    /* backgrounds */
    --color-background-layout-main: #ffffff;
    --color-background-container-content: #ffffff;
    --color-background-container-header: #ffffff;
    --color-background-table-header: #ffffff;
    --color-background-input-default: #ffffff;
    --color-background-button-normal-default: #ffffff;
    --color-background-button-normal-hover: #f0fbff;
    --color-background-button-normal-active: #d1f1ff;
    --color-background-button-primary-default: #006ce0;
    --color-background-button-primary-hover: #002b66;
    --color-background-button-primary-disabled: #ebebf0;
    --color-background-button-link-hover: #f0fbff;
    --color-background-item-selected: #f0fbff;
    --color-background-item-hover: #f3f3f7;
    --color-background-cell-shaded: #f6f6f9;
    --color-background-dropdown-item-hover: #f3f3f7;
    --color-background-layout-toggle-default: #424650;
    --color-background-layout-toggle-hover: #656871;
    --color-background-notification-red: #db0000;
    --color-background-notification-green: #00802f;
    --color-background-notification-blue: #006ce0;
    --color-background-notification-yellow: #ffe347;
    --color-background-notification-grey: #424650;
    --color-background-status-error: #fff5f5;
    --color-background-status-warning: #fffef0;
    --color-background-status-success: #effff1;
    --color-background-status-info: #f0fbff;
    --color-background-modal-overlay: rgba(35, 43, 55, 0.7);
    --color-background-home-header: #0f141a;

    /* borders */
    --color-border-divider-default: #c6c6cd;
    --color-border-divider-secondary: #ebebf0;
    --color-border-layout: #c6c6cd;
    --color-border-panel-header: #c6c6cd;
    --color-border-control-default: #8c8c94;
    --color-border-input-default: #8c8c94;
    --color-border-input-focused: #006ce0;
    --color-border-item-focused: #006ce0;
    --color-border-item-selected: #006ce0;
    --color-border-button-normal-default: #006ce0;
    --color-border-button-normal-hover: #002b66;
    --color-border-button-normal-disabled: #b4b4bb;
    --color-border-status-error: #db0000;
    --color-border-status-success: #00802f;
    --color-border-status-warning: #855900;
    --color-border-status-info: #006ce0;
    --color-border-tabs-underline: #006ce0;
    --color-border-dropdown-container: #b4b4bb;

    /* spacing (comfortable density) */
    --space-xxxs: 2px;  --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-layout-content-bottom: 40px;
    --space-content-header-padding-bottom: 16px;
    --space-panel-nav-left: 28px;
    --space-panel-side-right: 24px;
    --space-panel-header-vertical: 20px;
    --space-panel-content-top: 20px;
    --space-container-horizontal: 20px;
    --space-container-header-top: 12px;
    --space-container-header-bottom: 8px;
    --space-container-content-top: 4px;
    --space-table-horizontal: 20px;
    --space-field-horizontal: 12px;
    --space-button-horizontal: 20px;
    --space-button-icon-only-horizontal: 6px;
    --space-button-focus-outline-gutter: 4px;
    --space-alert-vertical: 8px;   --space-alert-horizontal: 16px;
    --space-flashbar-vertical: 8px; --space-flashbar-horizontal: 16px;
    --space-modal-horizontal: 20px;
    --space-layout-toggle-diameter: 36px;
    --space-layout-toggle-padding: 12px;

    /* sizes, radii, borders */
    --size-vertical-input: 32px;
    --size-icon-normal: 16px;  --size-icon-medium: 20px;  --size-icon-big: 32px;
    --size-control: 16px;
    --size-table-selection-horizontal: 40px;
    --size-nav-width: 280px;
    --size-tools-width: 290px;
    --size-top-navigation: 56px;
    --border-radius-container: 16px;
    --border-radius-button: 20px;
    --border-radius-alert: 12px;
    --border-radius-flashbar: 12px;
    --border-radius-input: 8px;
    --border-radius-dropdown: 8px;
    --border-radius-item: 8px;
    --border-radius-popover: 8px;
    --border-radius-badge: 4px;
    --border-radius-control-focus-ring: 4px;
    --border-width-button: 2px;
    --border-width-field: 1px;
    --border-width-alert: 2px;
    --border-active-width: 4px;
    --border-item-width: 2px;

    /* shadows */
    --shadow-container-active: 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.102);
    --shadow-dropdown: 0px 4px 20px 1px rgba(0, 7, 22, 0.1);
    --shadow-modal: 0px 4px 20px 1px rgba(0, 7, 22, 0.1);
    --shadow-flash-sticky: 0px 4px 8px rgba(0, 7, 22, 0.1);
    --shadow-sticky: 0px 4px 8px 1px rgba(0, 7, 22, 0.1);
    --shadow-panel: 0px 0px 0px 1px #b6bec9;
    --shadow-panel-toggle: 0px 6px 12px 1px rgba(0, 7, 22, 0.12);

    /* motion */
    --motion-duration-responsive: 115ms;
    --motion-duration-expressive: 165ms;
    --motion-duration-complex: 250ms;
    --motion-duration-rotate-180: 135ms;
    --motion-easing-responsive: cubic-bezier(0, 0, 0, 1);
    --motion-easing-expressive: cubic-bezier(0.84, 0, 0.16, 1);
    --motion-easing-rotate-180: cubic-bezier(0.165, 0.84, 0.44, 1);

    /* charts (categorical 1–12) */
    --color-charts-palette-categorical-1: #688ae8;
    --color-charts-palette-categorical-2: #c33d69;
    --color-charts-palette-categorical-3: #2ea597;
    --color-charts-palette-categorical-4: #8456ce;
    --color-charts-palette-categorical-5: #e07941;
    --color-charts-palette-categorical-6: #3759ce;
    --color-charts-palette-categorical-7: #962249;
    --color-charts-palette-categorical-8: #096f64;
    --color-charts-palette-categorical-9: #6237a7;
    --color-charts-palette-categorical-10: #a84401;
    --color-charts-palette-categorical-11: #273ea5;
    --color-charts-palette-categorical-12: #780d35;
    --color-charts-line-grid: #dedee3;
}

/* The dark top navigation is a token context, not a second theme: the same component rules render
   dark inside it because these properties are overridden on the context element. */
.b-ctx-top-nav {
    --color-background-container-content: #161d26;
    --color-text-top-navigation-title: #f9f9fa;
    --color-border-divider-default: #424650;
    --color-text-accent: #42b4ff;
    --color-text-link-default: #42b4ff;
    --color-text-link-hover: #75cfff;
    --color-text-button-normal-default: #42b4ff;
    --color-text-button-normal-hover: #75cfff;
    --color-border-item-focused: #42b4ff;
    --color-text-interactive-default: #dedee3;
    --color-text-interactive-hover: #f9f9fa;
    --color-text-body-default: #dedee3;
    --color-background-dropdown-item-default: #161d26;
    --color-background-dropdown-item-hover: #131920;
    --color-background-popover: #1b232d;
    --color-text-dropdown-item-default: #dedee3;
}

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