/* ComplyAgent design tokens as CSS custom properties.
 * Source of truth: design-tokens/tokens.json (brand/text/surface/severity/radius/font)
 * plus the ComplyAgent-only values from frontend/src/Theme/ThemeDefault.tsx.
 * The MUI theme (themeDefault) is the runtime consumer; these vars mirror it for
 * custom CSS / layout glue built around the components. */
:root {
    --ca-font-sans: 'Product Sans', sans-serif;

    --ca-color-primary: #2D63F2;
    --ca-color-primary-light: #5C84F6;
    --ca-color-primary-dark: #1E4ED8;

    --ca-color-text-strong: #06114e;
    --ca-color-text-secondary: #5B6280;
    --ca-color-text-muted: #71779A;
    --ca-color-text-disabled: #A5ABC4;

    --ca-color-surface-bg: #f4f4f8;
    --ca-color-surface-paper: #ffffff;
    --ca-color-surface-chip: #f4f4f8;
    --ca-color-border: #eaeaf3;

    --ca-color-severity-critical: #EF4444;
    --ca-color-severity-high: #F59E0B;
    --ca-color-severity-medium: #FCA5A5;
    --ca-color-severity-low: #4F46E5;
    --ca-color-severity-success: #70BA74;
    --ca-color-severity-critical-bg: #FEF3F2;
    --ca-color-severity-success-bg: rgba(0, 167, 111, 0.1);

    --ca-color-success: #009E60;
    --ca-color-warning: #EF4444;
    --ca-color-info: #F97316;

    --ca-radius-sm: 8px;
    --ca-radius-md: 13px;
    --ca-border-width: 1.5px;
    --ca-control-height-sm: 40px;
    --ca-control-height-md: 48px;
    --ca-control-height-lg: 56px;

    --ca-shadow-card: 1px 8px 13px rgb(0 0 0 / 2%);
    --ca-shadow-menu: 1px 8px 13px rgb(0 0 0 / 5%);
    --ca-shadow-tooltip: 1px 8px 13px rgb(0 0 0 / 20%);

    --ca-space-unit: 8px;
    --ca-bp-sm: 600px;
    --ca-bp-md: 900px;
    --ca-bp-lg: 1200px;
}

/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */

body {
    font-family: var(--ca-font-sans);
    background-color: var(--ca-color-surface-bg);
    color: var(--ca-color-text-strong);
}