/* ── App-level design tokens ──
   Used by layout.css and app.css for page-level styling.
   Telerik component styling comes from kendo-theme-default (loaded in App.razor).
   Do NOT add --kendo-* overrides here — let the Default theme handle components. */

:root {
    --app-font-family: Arial, Helvetica, sans-serif;
    --app-bg: #ffffff;
    --app-surface: #ffffff;
    --app-surface-alt: #f6f8fa;
    --app-text: #1f2328;
    --app-text-muted: #656d76;
    --app-primary: #0969da;
    --app-primary-hover: #0550ae;
    --app-success: #198754;
    --app-success-soft: #dff6dd;
    --app-warning: #9a6700;
    --app-warning-soft: #fff8c5;
    --app-error: #e50000;
    --app-error-soft: #FDECEF;
    --app-info: #0969da;
    --app-border: #d0d7de;
    --app-border-strong: #8c959f;
    /* Override the Default theme's primary colour (orange) with our blue */
    --kendo-color-primary: #5ea5f3ff;
    --kendo-color-primary-hover: #1176e4ff;
    --kendo-color-primary-active: #1176e4ff;
    --kendo-color-on-primary: #ffffff;
    --app-radius-sm: 4px;
    --app-radius-md: 6px;
    --app-radius-lg: 6px;
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 24px;
    --app-space-6: 32px;
    --app-space-7: 40px;
    --app-header-height: 56px;
    --app-page-width-xs: 480px;
    --app-page-width-sm: 800px;
    --app-page-width-md: 1000px;
    --app-page-width-lg: 1200px;
    --app-input-height: 36px;
    --app-input-max-width: 360px;
    --app-input-font-size: 1 rem;
    --app-shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.04);
    --app-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.08);
}