:root {
    --primary-color: #ef4444;
    /* red-500 */
    --primary-color-dark: #dc2626;
    /* red-600 */
    --primary-color-light: #f87171;
    /* red-400 */
    --primary-color-rgb: 239, 68, 68;
    --primary-shadow: rgba(239, 68, 68, 0.3);

    /* Dark Mode Defaults */
    --bg-body-gradient-start: #450a0a;
    --bg-body-gradient-end: #000000;
    --bg-color-main: #000000;
    --text-color-base: #f8fafc;
    --text-color-muted: #9ca3af;
    --text-color-slate-400: #94a3b8;
    --bg-header-gradient-start: #111827;
    --bg-header-gradient-end: #020617;
    --bg-sidebar: #000000;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-soft: rgba(255, 255, 255, 0.05);
    --bg-card: linear-gradient(135deg, #111827 0%, #0a0a0a 100%);
    --bg-card-raw: #111827;
    --bg-btn-secondary: rgba(255, 255, 255, 0.03);
    --bg-btn-secondary-hover: rgba(255, 255, 255, 0.08);
    --bg-active-nav: rgba(255, 255, 255, 0.08);
    --bg-hover-nav: rgba(255, 255, 255, 0.05);
    --bg-activity-card: #0f172a;
    --bg-table: linear-gradient(135deg, #111827 0%, #020617 100%);
    --bg-table-header: rgba(255, 255, 255, 0.03);
    --bg-action-menu: #1f0303;
    --border-action-menu: rgba(153, 27, 27, 0.4);
    --text-white-raw: #ffffff;
    --notif-badge-ring: #1e2330;
    
    /* Modal variables */
    --bg-modal-card: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
    --bg-modal-header: rgba(0, 0, 0, 0.2);
}

/* Light Mode Overrides */
html.light-mode {
    --bg-body-gradient-start: #fef2f2;
    --bg-body-gradient-end: #f8fafc;
    --bg-color-main: #f8fafc;
    --text-color-base: #0f172a;
    --text-color-muted: #475569;
    --text-color-slate-400: #64748b;
    --bg-header-gradient-start: #ffffff;
    --bg-header-gradient-end: #f1f5f9;
    --bg-sidebar: #ffffff;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-soft: rgba(0, 0, 0, 0.05);
    --bg-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --bg-card-raw: #ffffff;
    --bg-btn-secondary: rgba(0, 0, 0, 0.03);
    --bg-btn-secondary-hover: rgba(0, 0, 0, 0.06);
    --bg-active-nav: rgba(0, 0, 0, 0.05);
    --bg-hover-nav: rgba(0, 0, 0, 0.03);
    --bg-activity-card: #f1f5f9;
    --bg-table: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --bg-table-header: rgba(0, 0, 0, 0.02);
    --bg-action-menu: #ffffff;
    --border-action-menu: rgba(0, 0, 0, 0.1);
    --text-white-raw: #0f172a;
    --notif-badge-ring: #ffffff;

    /* Modal variables */
    --bg-modal-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --bg-modal-header: rgba(0, 0, 0, 0.02);

    /* Tailwind v4 mappings overrides */
    --color-background-app: #f8fafc;
    --color-foreground-app: #0f172a;
    --color-border-app: #e2e8f0;
    --color-input-app: #ffffff;
    --color-secondary-app: #e2e8f0;
    --color-secondary-foreground-app: #475569;
    --color-muted-app: #f1f5f9;
    --color-muted-foreground-app: #64748b;
    --color-card-app: #ffffff;
    --color-card-foreground-app: #0f172a;
    --color-sidebar-app: #ffffff;
    --color-sidebar-foreground-app: #475569;
    --color-sidebar-primary-app: #f1f5f9;
    --color-sidebar-primary-foreground-app: #0f172a;
}