:root {
    /* Brand */
    --color-primary: #35a8df;
    --color-primary-hover: #1f8fc4;
    --color-primary-active: #1879a6;
    --color-secondary: #ff9816;
    --color-secondary-hover: #e67f00;
    --color-secondary-active: #c96d00;
    --color-accent: #ff5757;
    --color-accent-hover: #e64545;
    --color-accent-active: #c93636;

    /* Background */
    --color-bg-page: #f4f9fc;
    --color-bg-surface: #ffffff;
    --color-bg-surface-soft: #eef6fb;
    --color-bg-surface-muted: #e6f1f7;
    --color-bg-primary: #35a8df;
    --color-bg-primary-soft: #e9f6fc;
    --color-bg-secondary: #ff9816;
    --color-bg-secondary-soft: #fff4e5;
    --color-bg-accent: #ff5757;
    --color-bg-accent-soft: #ffeaea;
    --color-bg-disabled: #edf3f7;

    /* Text */
    --color-text-main: #1d2733;
    --color-text-muted: #5f6b76;
    --color-text-soft: #7c8a96;
    --color-text-disabled: #9aa8b3;
    --color-text-primary: #35a8df;
    --color-text-secondary: #ff9816;
    --color-text-accent: #ff5757;
    --color-text-on-primary: #ffffff;
    --color-text-on-secondary: #ffffff;
    --color-text-on-accent: #ffffff;
    --color-text-on-dark: #ffffff;

    /* Border */
    --color-border: #d8e6ef;
    --color-border-soft: #e8f1f6;
    --color-border-strong: #b8ccd8;
    --color-border-primary: #8dcdea;
    --color-border-secondary: #ffd08f;
    --color-border-accent: #ffb3b3;

    /* Status */
    --color-success: #22a06b;
    --color-success-hover: #1c8c5c;
    --color-success-soft: #e8f7f0;
    --color-text-on-success: #ffffff;
    --color-warning: #d98a00;
    --color-warning-soft: #fff4db;
    --color-text-on-warning: #ffffff;
    --color-danger: #d64545;
    --color-danger-soft: #fdecec;
    --color-text-on-danger: #ffffff;
    --color-info: #2d7ff9;
    --color-info-soft: #eaf2ff;
    --color-text-on-info: #ffffff;

    /* Neutral */
    --color-white: #ffffff;

    /* Interactive */
    --color-focus-ring: rgba(53, 168, 223, 0.25);
    --color-overlay: rgba(29, 39, 51, 0.45);
    --color-overlay-soft: rgba(15, 23, 42, 0.32);

    /* Radius scale */
    --radius-sm: 0.6rem;
    --radius-md: 0.8rem;
    --radius-lg: 0.9rem;
    --radius-xl: 1rem;
    --radius-card: 14px;
    --radius-card-sm: 12px;
    --radius-pill: 999px;

    /* Elevation scale */
    --shadow-xs: 0 2px 10px rgba(29, 39, 51, 0.04);
    --shadow-sm: 0 4px 14px rgba(29, 39, 51, 0.06);
    --shadow-md: 0 1rem 2rem rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 16px 34px rgba(15, 23, 42, 0.14);
    --shadow-focus: 0 0 0 3px var(--color-focus-ring);

    /* Layering scale */
    --z-header: 1030;
    --z-toast: 1040;
    --z-modal-backdrop: 1050;
    --z-modal: 1060;
    --z-tooltip: 1080;
    --z-splash: 2000;

    /* Typography
       Families are declared in css-ext/fonts.css (linked from base.twig) and the
       font files live in Assets/vendor/fonts — see docs/typography.md. */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}