:root {
    --bg-app: #f3f6fb;

    --color-neutral-50: #f8fafc;
    --color-neutral-100: #eef3f8;
    --color-neutral-200: #d9e2ec;
    --color-neutral-300: #b7c6d6;
    --color-neutral-700: #344054;
    --color-neutral-900: #102136;

    --color-primary-100: #dbeafe;
    --color-primary-300: #93c5fd;
    --color-primary-500: #155eef;
    --color-primary-600: #0856a3;

    --color-teal-100: #d2f5ef;
    --color-teal-300: #82ddd0;
    --color-teal-500: #0baaa0;
    --color-teal-600: #0a7f78;

    --color-emerald-100: #d7f5e8;
    --color-emerald-300: #8ddbb6;
    --color-emerald-600: #13795b;

    --color-amber-100: #fef0c7;
    --color-amber-300: #f7c66d;
    --color-amber-600: #d18b09;

    --color-red-100: #fce7e5;
    --color-red-300: #f4a9a2;
    --color-red-600: #c2413d;

    --color-violet-100: #ede9fe;
    --color-violet-300: #c4b5fd;
    --color-violet-600: #7c3aed;

    --surface-foundation: #ffffff;
    --surface-foundation-muted: #f4f7fb;
    --surface-foundation-selected: linear-gradient(135deg, rgba(8, 86, 163, 0.14), rgba(11, 170, 159, 0.12));

    --border-subtle: rgba(16, 33, 54, 0.08);
    --border-soft: rgba(16, 33, 54, 0.1);
    --border-strong: rgba(16, 33, 54, 0.14);
    --border-brand: rgba(8, 86, 163, 0.18);

    --brand-primary: var(--color-primary-500);
    --warning: var(--color-amber-600);
    --danger: var(--color-red-600);
    --success: var(--color-emerald-600);
    --success-soft: rgba(19, 121, 91, 0.14);
    --warning-soft: rgba(209, 139, 9, 0.14);

    --state-info: var(--color-primary-500);
    --state-info-soft: rgba(21, 94, 239, 0.12);
    --state-info-border: rgba(21, 94, 239, 0.2);
    --state-success: var(--color-emerald-600);
    --state-success-soft: rgba(19, 121, 91, 0.14);
    --state-success-border: rgba(19, 121, 91, 0.18);
    --state-warning: var(--color-amber-600);
    --state-warning-soft: rgba(209, 139, 9, 0.14);
    --state-warning-border: rgba(209, 139, 9, 0.22);
    --state-danger: var(--color-red-600);
    --state-danger-soft: rgba(194, 65, 61, 0.14);
    --state-danger-border: rgba(194, 65, 61, 0.22);

    --risk-low: var(--color-emerald-600);
    --risk-low-soft: rgba(19, 121, 91, 0.12);
    --risk-low-border: rgba(19, 121, 91, 0.18);
    --risk-medium: var(--color-amber-600);
    --risk-medium-soft: rgba(209, 139, 9, 0.14);
    --risk-medium-border: rgba(209, 139, 9, 0.22);
    --risk-high: var(--color-red-600);
    --risk-high-soft: rgba(194, 65, 61, 0.14);
    --risk-high-border: rgba(194, 65, 61, 0.22);
}

.app-shell[data-ui-theme="dark"] {
    --surface-foundation: #0f1728;
    --surface-foundation-muted: #162335;
    --surface-foundation-selected: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(13, 148, 136, 0.22));

    --border-subtle: rgba(148, 163, 184, 0.12);
    --border-soft: rgba(148, 163, 184, 0.16);
    --border-strong: rgba(148, 163, 184, 0.22);
    --border-brand: rgba(96, 165, 250, 0.24);

    --state-info-soft: rgba(59, 130, 246, 0.18);
    --state-info-border: rgba(96, 165, 250, 0.3);
    --state-success-soft: rgba(19, 121, 91, 0.18);
    --state-success-border: rgba(110, 231, 183, 0.28);
    --state-warning-soft: rgba(209, 139, 9, 0.2);
    --state-warning-border: rgba(251, 191, 36, 0.3);
    --state-danger-soft: rgba(194, 65, 61, 0.2);
    --state-danger-border: rgba(248, 113, 113, 0.3);

    --risk-low-soft: rgba(19, 121, 91, 0.18);
    --risk-low-border: rgba(110, 231, 183, 0.28);
    --risk-medium-soft: rgba(209, 139, 9, 0.2);
    --risk-medium-border: rgba(251, 191, 36, 0.3);
    --risk-high-soft: rgba(194, 65, 61, 0.2);
    --risk-high-border: rgba(248, 113, 113, 0.32);
}