/* ==========================================================
   miProgram design tokens (modern UI, replacing Kendo: pilot 2026-11)
   ONE place for colours, radii, shadows and breakpoints. Loaded first by
   _Layout.cshtml and _HomeLayout.cshtml. Values are the palette the app
   already uses (Site.css header, paperless-modern.css), so nothing shifts.
   Breakpoints (CSS can't use variables in @media, so by convention):
       phone   <= 768px    (Mobile.css)
       tablet  769-1180px, touch screens (no hover)
       desktop  > 1180px
   ========================================================== */
:root {
    --mi-bg: #E2E8F0;
    --mi-surface: #FFFFFF;
    --mi-surface-2: #F7FAFC;
    --mi-ink: #1A202C;
    --mi-text: #4A5568;
    --mi-muted: #718096;
    --mi-border: #E2E8F0;
    --mi-border-strong: #CBD5E0;
    --mi-line: #EDF2F7;
    --mi-stripe: #F2F5F8;
    --mi-row-hover: #E6ECF2;

    --mi-accent: #0D9488;
    --mi-accent-dk: #0F766E;
    --mi-accent-soft: #E6FFFA;
    --mi-accent-ring: rgba(13, 148, 136, 0.15);

    --mi-dark: #2D3748;
    --mi-dark-dk: #1A202C;

    --mi-danger: #DC2626;
    --mi-danger-dk: #B91C1C;
    --mi-danger-soft: #FEE2E2;
    --mi-warning: #F59E0B;
    --mi-warning-soft: #FEF3C7;
    --mi-info: #3182CE;
    --mi-info-soft: #EBF8FF;
    --mi-orange: #EA580C;
    --mi-orange-soft: #FFF7ED;

    --mi-radius-sm: 0.375rem;
    --mi-radius: 0.5rem;
    --mi-radius-lg: 0.5rem;
    --mi-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --mi-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);

    --mi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mi-tap: 44px;
    --mi-topbar-h: 48px; /* the sticky top bar (Site.css #top-bar); taller with Back under the breadcrumbs */
}