/*
 * HCI design tokens adapted to plain CSS for Blazor.
 * Frost Line establishes the brand palette and semantic-token approach.
 * The prototype's Roboto font, #297fb8 blue, spacing and radii are used here.
 * See docs/design.md for the source comparison.
 */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-latin-variable.woff2") format("woff2");
}

:root {
    color-scheme: light;
    --hci-font-family: "Roboto", Arial, sans-serif;
    --hci-color-primary-50: #f2f8fd;
    --hci-color-primary-100: #e4effa;
    --hci-color-primary-500: #297fb8;
    --hci-color-primary-600: #1e6fab;
    --hci-color-primary-700: #19588b;
    --hci-color-primary-800: #194c73;
    --hci-color-ink: #3d3d3d;
    --hci-color-ink-subtle: #4f4f4f;
    --hci-color-placeholder: #5d5d5d;
    --hci-color-page: #f2f4f5;
    --hci-color-surface: #ffffff;
    --hci-color-border: #d1d1d1;
    --hci-color-divider: #e7e7e7;
    --hci-color-disabled: #888888;
    --hci-color-disabled-fill: #e7e7e7;
    --hci-color-focus: #3b5bdb;
    --hci-color-positive: #187d23;
    --hci-color-positive-fill: #f0fdf1;
    --hci-spacing-2xs: 4px;
    --hci-spacing-xs: 8px;
    --hci-spacing-sm: 12px;
    --hci-spacing-md: 16px;
    --hci-spacing-xl: 24px;
    --hci-spacing-3xl: 32px;
    --hci-radius-field: 4px;
    --hci-radius-button: 8px;
    --hci-radius-card: 16px;
    --hci-shadow-card: 0 4px 12px rgb(0 0 0 / 5%);
    --hci-shadow-modal: 0 12px 16px rgb(0 0 0 / 15%);
}