:root {
    /* Code Solution brand: green + orange (codesolution.org) */
    --primary-color: #106850;
    --primary-color-dark: #0a5240;
    --primary-color-light: #1a8a68;
    --primary-color-rgb: 16, 104, 80;
    --primary-shadow: rgba(16, 104, 80, 0.3);
    --secondary-color: #e8873a;
    --secondary-color-dark: #d07028;
    --secondary-color-light: #f0a05c;
    --secondary-color-rgb: 232, 135, 58;
    --secondary-shadow: rgba(232, 135, 58, 0.35);
    --brand-black: #0a0a0a;
    --brand-white: #ffffff;

    /* Dark Mode Defaults */
    --bg-body-gradient-start: #06261e;
    --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;
    
    /* Semantic Component Tokens */
    --bg-surface-elevated: #1e293b;
    --bg-surface-muted: #0f172a;
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-strong: rgba(255, 255, 255, 0.15);
    
    /* Inputs Styling */
    --input-bg: rgba(15, 23, 42, 0.6);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-text: #f8fafc;
    --input-placeholder: #64748b;
    
    /* Modal variables */
    --bg-modal-card: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
    --bg-modal-header: rgba(0, 0, 0, 0.2);
}

/* Light Mode Overrides — warm paper + brand depth (match dark polish) */
html.light-mode {
    --bg-body-gradient-start: #f3f7f4;
    --bg-body-gradient-end: #f7f6f2;
    --bg-color-main: #f7f6f2;
    --text-color-base: #0a0a0a;
    --text-color-muted: #3f4a42;
    --text-color-slate-400: #5c675f;
    --bg-header-gradient-start: #0a0a0a;
    --bg-header-gradient-end: #111827;
    --bg-sidebar: #ffffff;
    --border-color: rgba(16, 104, 80, 0.14);
    --border-color-soft: rgba(16, 104, 80, 0.08);
    --bg-card: linear-gradient(165deg, #ffffff 0%, #fbfaf7 100%);
    --bg-card-raw: #ffffff;
    --bg-btn-secondary: rgba(16, 104, 80, 0.06);
    --bg-btn-secondary-hover: rgba(16, 104, 80, 0.1);
    --bg-active-nav: rgba(16, 104, 80, 0.1);
    --bg-hover-nav: rgba(16, 104, 80, 0.05);
    --bg-activity-card: #eef3f0;
    --bg-table: linear-gradient(165deg, #ffffff 0%, #f7f6f2 100%);
    --bg-table-header: rgba(16, 104, 80, 0.04);
    --bg-action-menu: #ffffff;
    --border-action-menu: rgba(16, 104, 80, 0.14);
    --text-white-raw: #0a0a0a;
    --notif-badge-ring: #ffffff;

    /* Semantic Component Tokens */
    --bg-surface-elevated: #ffffff;
    --bg-surface-muted: #eef3f0;
    --border-subtle: rgba(16, 104, 80, 0.08);
    --border-strong: rgba(16, 104, 80, 0.18);

    /* Inputs Styling */
    --input-bg: #ffffff;
    --input-border: rgba(16, 104, 80, 0.16);
    --input-text: #0a0a0a;
    --input-placeholder: #7a857e;

    /* Modal variables */
    --bg-modal-card: linear-gradient(165deg, #ffffff 0%, #f7f6f2 100%);
    --bg-modal-header: rgba(16, 104, 80, 0.04);

    /* Tailwind v4 mappings overrides */
    --color-background-app: #f7f6f2;
    --color-foreground-app: #0a0a0a;
    --color-border-app: rgba(16, 104, 80, 0.14);
    --color-input-app: #ffffff;
    --color-secondary-app: #eef3f0;
    --color-secondary-foreground-app: #3f4a42;
    --color-muted-app: #eef3f0;
    --color-muted-foreground-app: #5c675f;
    --color-card-app: #ffffff;
    --color-card-foreground-app: #0a0a0a;
    --color-sidebar-app: #ffffff;
    --color-sidebar-foreground-app: #3f4a42;
    --color-sidebar-primary-app: #eef3f0;
    --color-sidebar-primary-foreground-app: #0a0a0a;
}

/* Brand utility buttons (green / orange — never blue/red CTAs) */
.bg-brand,
.btn-brand {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -8px var(--primary-shadow) !important;
}
.bg-brand:hover,
.btn-brand:hover {
    background: var(--primary-color-dark) !important;
}
.bg-brand-accent,
.btn-brand-accent {
    background: var(--secondary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -8px var(--secondary-shadow) !important;
}
.bg-brand-accent:hover,
.btn-brand-accent:hover {
    background: var(--secondary-color-dark) !important;
}
.text-brand { color: var(--primary-color) !important; }
.text-brand-accent { color: var(--secondary-color) !important; }

/* Light mode: force white labels on brand fills (beats global .text-white → black) */
html.light-mode .btn-brand,
html.light-mode .btn-brand-accent,
html.light-mode .bg-brand,
html.light-mode .bg-brand-accent,
html.light-mode .btn-brand.text-white,
html.light-mode .btn-brand-accent.text-white,
html.light-mode .bg-brand.text-white,
html.light-mode .bg-brand-accent.text-white,
html.light-mode .btn-brand *,
html.light-mode .btn-brand-accent *,
html.light-mode .bg-brand *,
html.light-mode .bg-brand-accent *,
html.light-mode .btn-brand .text-white,
html.light-mode .btn-brand-accent .text-white,
html.light-mode .bg-brand .text-white,
html.light-mode .bg-brand-accent .text-white,
html.light-mode .btn-brand i,
html.light-mode .btn-brand-accent i,
html.light-mode .btn-brand span,
html.light-mode .btn-brand-accent span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}