/* ==========================================================================
   Global Variables for Blazor SSR Application
   ========================================================================== */
/* Purpose: Defines CSS custom properties for theming, overriding Bootstrap 5.3 and Syncfusion 30.1.40 defaults. Must load before bootstrap.min.css. Ensures WCAG 4.5:1 contrast ratios and aligns with branding. */

:root {
    /* Colors */
    --bvrgreen: #00B900; /* Brand green for badges and accents */
    --bvrblue: #199be5; /* Brand blue for primary actions */
    --bvrred: #E50000; /* Brand red for errors */
    --bvrorange: #FF9900; /* Brand orange for warnings */
    --bvrblueviolet: #003E92; /* Brand dark blue for navigation */

    --bs-primary: var(--bvrblue);
    --bs-primary-rgb: 25, 155, 229;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: var(--bvrgreen);
    --bs-success-rgb: 0, 185, 0;
    --bs-info: #17a2b8;
    --bs-info-rgb: 23, 162, 184;
    --bs-warning: var(--bvrorange);
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger: var(--bvrred);
    --bs-danger-rgb: 220, 53, 69;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #343a40;
    --bs-dark-rgb: 52, 58, 64;
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-white: #ffffff;
    --bs-white-rgb: 255, 255, 255;
    --bs-black: #000000;
    --bs-black-rgb: 0, 0, 0;
    /* Button styles */
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-color: var(--bs-white);
    --bs-btn-hover-bg: hsl(from var(--bs-primary) h s calc(l - 10%));
    --bs-btn-hover-border-color: hsl(from var(--bs-primary) h s calc(l - 10%));
    --bs-btn-border-color: var(--bs-primary);
    /* Link styles */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: hsl(from var(--bs-primary) h s calc(l - 10%));
    --bs-link-decoration: underline;
    /* Layout and design */
    --bs-border-radius: 0.375rem; /* Matches Bootstrap default */
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Matches Bootstrap default */
    --bs-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    /* Typography */
    --font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    --bs-font-sans-serif: var(--font-family);
    --bs-body-font-family: var(--font-family);
    --bs-body-font-size: 1rem; /* 16px */
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6; /* Improved readability */
    --bs-heading-font-weight: 600;
    --bs-heading-line-height: 1.3; /* Improved readability */
    --bs-display-font-weight: 300;
    --bs-display-line-height: 1.3; /* Improved readability */
    /* Modular scale for typography and spacing */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-sm: 0.875rem; /* 14px for WCAG */
    --font-size-xs: 0.75rem; /* 12px for WCAG */
    --spacing-base: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-md: 1.25rem; /* 20px */
    --spacing-sm: 0.75rem; /* 12px */
    --spacing-xs: 0.5rem; /* 8px */
}