/*  ═══════════════════════════════════════════════════════════
    Brand Theme — #2a1010  (dark maroon)
    ═══════════════════════════════════════════════════════════
    Single source of truth for the Biometric Middleware UI.
    Every colour in the application flows from --brand.

    Palette shades were generated from the primary colour
    #2a1010 to provide a full light→dark ramp that replaces
    the default Tailwind indigo / purple utilities.
    ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────── 1. CSS Custom Properties ── */
:root {
    /* Core brand ramp (light → dark) */
    --brand-50 : #faf5f5;
    --brand-100: #f0e0e0;
    --brand-200: #dbbcbc;
    --brand-300: #c09090;
    --brand-400: #8a4545;
    --brand-500: #5a2020;
    --brand    : #2a1010;   /* ← PRIMARY */
    --brand-600: #2a1010;
    --brand-700: #200c0c;
    --brand-800: #180909;
    --brand-900: #100606;
    --brand-950: #0a0303;

    /* Contrast & accent */
    --brand-contrast: #ffffff;
    --link-hover    : #dc2626;   /* red on hover */

    /* Semantic (kept intentionally distinct) */
    --color-success : #22c55e;
    --color-danger  : #ef4444;
    --color-warning : #f59e0b;
    --color-info    : #3b82f6;
}

/* ──────────────────────────── 2. Global resets ── */
::selection {
    background-color: var(--brand-200);
    color: var(--brand-900);
}

/* ──────────────────────────── 3. Links ── */
a {
    color: var(--brand);
    transition: color 0.15s ease;
}
a:hover {
    color: var(--link-hover);
}

/* Links inside buttons / badges should not inherit this colour */
.btn a, .badge a, a.btn, a[class*="bg-"] {
    color: inherit;
}

/* ──────────────────────────── 4. Sidebar ── */
.sidebar-link.active {
    background-color: var(--brand-100) !important;
    color: var(--brand) !important;
    font-weight: 600;
}
.sidebar-link:hover {
    background-color: var(--brand-50) !important;
}

/* ──────────────────────────── 5. Buttons ── */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--brand) !important;
    color: var(--brand-contrast) !important;
    border-color: var(--brand) !important;
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
}

/* Outline variant */
.btn-brand-outline {
    background-color: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
}
.btn-brand-outline:hover {
    background-color: var(--brand);
    color: var(--brand-contrast);
}

/* Semantic buttons (kept distinct) */
.btn-success  { background-color: var(--color-success); color: white; }
.btn-success:hover { background-color: #16a34a; }
.btn-danger   { background-color: var(--color-danger);  color: white; }
.btn-danger:hover  { background-color: #dc2626; }
.btn-warning  { background-color: var(--color-warning); color: white; }
.btn-warning:hover { background-color: #d97706; }

/* ──────────────────────────── 6. Form controls ── */
input:focus, select:focus, textarea:focus {
    --tw-ring-color: var(--brand-400) !important;
    border-color: var(--brand-400) !important;
    outline-color: var(--brand-400);
}
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand);
}

/* ──────────────────────────── 7. Tables ── */
.table-container tr:hover {
    background-color: var(--brand-50) !important;
}

/* ──────────────────────────── 8. Badges ── */
.badge-brand {
    background-color: var(--brand-100);
    color: var(--brand);
}

/* ──────────────────────────── 9. Cards & accents ── */
.brand-stripe {
    background: linear-gradient(to right, var(--brand), var(--brand-400)) !important;
}
.brand-gradient {
    background: linear-gradient(135deg, var(--brand), var(--brand-400)) !important;
}

/* ──────────────────────────── 10. Loading / spinners ── */
.brand-spinner {
    color: var(--brand-400);
}

/* ──────────────────────────── 11. Scrollbar tint (webkit) ── */
::-webkit-scrollbar-thumb {
    background-color: var(--brand-200);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-400);
}