/* ==========================================================================
   MotorEpc Design Tokens
   Single source of truth for color, spacing, radius, and shadow values.
   Do not hard-code hex/px values in page-specific CSS — reference these
   variables instead so the whole app stays visually consistent.
   ========================================================================== */

:root {
    /* ---- Brand ---- */
    --mep-primary: #2fa4e7;
    --mep-primary-hover: #1c8fd1;
    --mep-primary-subtle: rgba(47, 164, 231, .12);
    /* ---- Semantic ---- */
    --mep-success: #28a745;
    --mep-danger: #dc3545;
    --mep-warning: #fe9f43;
    --mep-info: #2fa4e7;
    /* ---- Neutrals (grays) ---- */
    --mep-gray-50: #f8f9fa;
    --mep-gray-100: #f1f5f9;
    --mep-gray-200: #e9ecef;
    --mep-gray-300: #dee2e6;
    --mep-gray-600: #6c757d;
    --mep-gray-700: #495057;
    --mep-gray-900: #212529;
    /* ---- Surfaces ---- */
    --mep-white: #ffffff;
    --mep-body-bg: #f8f9fa;
    --mep-border: #dee2e6;
    /* ---- Spacing scale ---- */
    --mep-space-1: 4px;
    --mep-space-2: 8px;
    --mep-space-3: 12px;
    --mep-space-4: 16px;
    --mep-space-5: 24px;
    --mep-space-6: 32px;
    /* ---- Radius scale ---- */
    --mep-radius-sm: 4px;
    --mep-radius-md: 8px;
    --mep-radius-lg: 12px;
    --mep-radius-pill: 50rem;
    /* ---- Shadows ---- */
    --mep-shadow-sm: 0 1px 4px rgba(0, 0, 0, .05);
    --mep-shadow-md: 0 2px 8px rgba(0, 0, 0, .08);
    --mep-shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);
    /* ---- Typography ---- */
    --mep-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --mep-fs-xs: 0.75rem; /* 12px */
    --mep-fs-sm: 0.875rem; /* 14px */
    --mep-fs-base: 1rem; /* 16px */
    --mep-fs-lg: 1.125rem; /* 18px */
    --mep-fs-xl: 1.5rem; /* 24px */
    /* ---- Map onto Bootstrap 5's own variables ----
     This is what makes existing btn-primary / alert-danger / text-success
     markup pick up the new palette automatically, with zero view changes. */
    --bs-primary: var(--mep-primary);
    --bs-primary-rgb: 47, 164, 231;
    --bs-success: var(--mep-success);
    --bs-danger: var(--mep-danger);
    --bs-warning: var(--mep-warning);
    --bs-info: var(--mep-info);
    --bs-border-color: var(--mep-border);
    --bs-body-bg: var(--mep-body-bg);
    --bs-body-font-family: var(--mep-font-family);
}