:root {
    /* ── Brand (Salesforce Lightning) ─────────────────────────── */
    --brand-primary:        #0176d3;
    --brand-primary-hover:  #014486;
    --brand-primary-light:  #ecf3fe;
    --brand-primary-lighter:#f3f8ff;
    --brand-primary-dark:   #032d60;

    /* ── Neutral Surfaces ─────────────────────────────────────── */
    --surface-white:     #ffffff;
    --surface-light:     #f3f6f8;
    --surface-cool-gray: #eceff1;

    /* ── Borders ──────────────────────────────────────────────── */
    --border-light:  #dddbda;
    --border-medium: #c9c7c5;

    /* ── Text Hierarchy ───────────────────────────────────────── */
    --text-primary:   #181818;
    --text-secondary: #3e3e3c;
    --text-muted:     #706e6b;
    --text-white:     #ffffff;

    /* ── Status Colors ────────────────────────────────────────── */
    --status-success:    #04844b;
    --status-success-bg: #d0f0dd;
    --status-error:      #c23934;
    --status-error-bg:   #feded8;
    --status-warning:    #fe9339;
    --status-warning-bg: #ffecd2;
    --status-info:       #0176d3;
    --status-info-bg:    #d8edff;

    /* ── Shared Gray Palette (Tailwind Slate) ─────────────────── */
    --gray-50:  #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* ── Cross-module Aliases (--color-* for superadmin.css) ──── */
    --color-primary: var(--brand-primary);
    --color-success: var(--status-success);
    --color-danger:  var(--status-error);
    --color-warning: var(--status-warning);
    --color-info:    var(--status-info);

    --color-gray-50:  var(--gray-50);
    --color-gray-100: var(--gray-100);
    --color-gray-200: var(--gray-200);
    --color-gray-300: var(--gray-300);
    --color-gray-400: var(--gray-400);
    --color-gray-500: var(--gray-500);
    --color-gray-600: var(--gray-600);
    --color-gray-700: var(--gray-700);
    --color-gray-800: var(--gray-800);
    --color-gray-900: var(--gray-900);

    /* ── Elevation ────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
    --radius:    8px;

    /* ══════════════════════════════════════════════════════════
       DESIGN SYSTEM TOKENS
       ══════════════════════════════════════════════════════════ */

    /* ── Typography Scale ─────────────────────────────────────── */
    --ds-font: 'Segoe UI', Roboto, Arial, sans-serif;

    --ds-h1:    1.5rem;     /* 24px — page-level title          */
    --ds-h2:    1.25rem;    /* 20px — section/page heading      */
    --ds-h3:    1rem;       /* 16px — card title / sub-section  */
    --ds-body:  0.875rem;   /* 14px — all body / table text     */
    --ds-label: 0.75rem;    /* 12px — form labels / metadata    */
    --ds-small: 0.6875rem;  /* 11px — table-header CAPS labels  */

    --ds-fw-regular:  400;
    --ds-fw-medium:   500;
    --ds-fw-semibold: 600;
    --ds-fw-bold:     700;

    --ds-lh-h1:   2rem;     /* 32px */
    --ds-lh-h2:   1.75rem;  /* 28px */
    --ds-lh-h3:   1.5rem;   /* 24px */
    --ds-lh-body: 1.25rem;  /* 20px */

    /* ── Spacing Scale ────────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* ── Table Tokens ─────────────────────────────────────────── */
    --tbl-row-h:      36px;        /* compact row height            */
    --tbl-head-h:     30px;        /* compact header row height     */
    --tbl-cell-px:    12px;        /* tighter horizontal padding    */
    --tbl-head-size:  var(--ds-small);
    --tbl-body-size:  0.8125rem;   /* 13px — compact body text      */

    /* ── Component Tokens ─────────────────────────────────────── */
    --ds-radius-sm: 4px;
    --ds-radius-md: 6px;
    --ds-radius-lg: 8px;
    --ds-radius-xl: 10px;

    --ds-section-gap:   24px;
    --ds-component-gap: 16px;
    --ds-inner-pad:     14px;
}

html,
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--surface-light);
    color: var(--text-primary);
    overflow-x: hidden;
    height: 100%;
}

a,
.btn-link {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover,
.btn-link:hover {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}

.btn-primary {
    color: var(--text-white);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(1, 118, 211, 0.25);
}

.content {
    padding-top: 0.5rem;
}

.validation-message {
    color: var(--status-error);
    font-size: 13px;
    margin-top: 4px;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 4px;
}

.table {
    --bs-table-hover-bg: var(--brand-primary-lighter);
}

/* ── Navigation Progress Bar ────────────────────────────────────────────────── */
#nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), #38bdf8, var(--brand-primary));
    background-size: 200% 100%;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
}