/* --------- Root vars --------- */
:root {
    --sidebar-width: 270px;
    --bg-page: #f9fafb;
    --bg-card: #ffffff;
    --bg-tint: #f9fafb;
    --bg-table: #ffffff;

    --text-main: #666769;
    --text-muted: #424346;
    --input-text: #424346;
    --input-color: black;

    --border: #d1d5db;
    --primary: #2563eb;
    --bg-hover: #e0e1e1;

    --btn-text: white;
    --btn-primary: #2563eb;
    --btn-primary-hover: #1d4ed8;
    --btn-success: #6ca651;
    --btn-success-hover: #6ca;
    --btn-text-primary: #ffffff;
    --btn-border: #6bd8f1;

    --error-text-color: #ffffff;
    --success: #568440;
    --warning: #f5b027;
    --error: #f54927;

    --shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    --radius: 0.5rem;
}

html.dark {
    --sidebar-width: 270px;
    --bg-page: #111827;
    --bg-card: #1f2937;
    --bg-table: #2a405f;
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --input-text: #9ca3af;
    --input-color: white;

    --border: #374151;
    --primary: #3b82f6;
    --bg-hover: #404652;

    --btn-text: white;
    --btn-primary: #2563eb;
    --btn-primary-hover: #1d4ed8;
    --btn-success: #0d48;
    --btn-success-hover: #0d4715;
    --btn-text-primary: #ffffff;
    --btn-border: #6bd8f1;

    --error-text-color: var(--text-main);
    --success: #568440;
    --warning: #f5b027;
    --error: #590e03;

    --shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    --radius: 0.5rem;
}