/* ==========================================================================
   Design Tokens — Concentio Admin
   Bootstrap 5.3 variable overrides + custom design tokens
   ========================================================================== */

:root {
    /* Base */
    --white: #fff;

    /* Brand */
    --brand-50:  #eef2f9;
    --brand-100: #d4ddef;
    --brand-200: #a9bbe0;
    --brand-500: #2d4f8e;
    --brand-600: #1f376b;
    --brand-700: #162850;

    /* Neutral */
    --neutral-50:  #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Semantic */
    --success-50:  #f0fdf4;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-border: #bbf7d0;

    --warning-50:  #fffbeb;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-border: #fde68a;

    --danger-50:  #fef2f2;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-border: #fecaca;

    --info-50:  #eff6ff;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-border: #bfdbfe;

    /* Radius scale */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Shadow scale */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

    /* Typography */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;

    /* Layout */
    --topbar-height: 56px;
    --sidebar-width: 240px;
    --content-width-narrow: 640px;

    /* Bootstrap overrides */
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--neutral-800);
    --bs-body-bg: var(--neutral-50);

    --bs-border-color: var(--neutral-200);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);

    --bs-link-color: var(--brand-600);
    --bs-link-hover-color: var(--brand-700);

    --bs-primary: var(--brand-500);
    --bs-primary-rgb: 45, 79, 142;
}

html {
    font-size: 15px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus ring override */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

/* Primary button override */
.btn-primary {
    --bs-btn-bg: var(--brand-500);
    --bs-btn-border-color: var(--brand-500);
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-focus-shadow-rgb: 45, 79, 142;
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

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

.btn-outline-primary {
    --bs-btn-color: var(--brand-500);
    --bs-btn-border-color: var(--brand-500);
    --bs-btn-hover-bg: var(--brand-500);
    --bs-btn-hover-border-color: var(--brand-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-600);
    --bs-btn-active-border-color: var(--brand-600);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-outline-primary:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}

.bg-primary { background-color: var(--brand-500) !important; }
.text-primary { color: var(--brand-600) !important; }
.border-primary { border-color: var(--brand-600) !important; }

/* Accent button alias (migrate existing pages) */
.btn-accent {
    background: var(--brand-500);
    color: #fff;
    border: 1px solid var(--brand-500);
}
.btn-accent:hover {
    background: var(--brand-600);
    color: #fff;
    border-color: var(--brand-600);
}