:root { --font-primary: 'Poppins', sans-serif; --font-heading: 'Bebas Neue', sans-serif; --base-color-rgb: 176, 160, 254; /* Updated to match base-color */ --base-color: #B0A0FE; --lighter-white: #ffffff25; --lighter-greyish: #ffffff5b; --greyish: #a3a3a3; --base-lighter: #b0a0fe25; --hover-color: #7961F4; --base-background: #050810; --card-background: #0D1018; --card-background-rgb: 13, 16, 24; /* Added for rgba usage */ --card-background-overlay: #0d1018cf; --text-color: #000000; --dark: #000000; --light: #fff; --dash-bg: #121212; --dash-tab-bg: rgba(255, 255, 255, 0.05); --dash-border: rgba(255, 255, 255, 0.249); --dash-action-bg: #30303044; --green: #63bb2d; --yellow: #FFC107; --red: #FF2F2F; --light-card: #eeeeee; --dark-btn: #101014; --dark-lighter: #101014a1; --golden-start: #FD961E; --lighter-light: #6f6f6f; --lighter-dark: #d2cfcf8b; --lighter-light-overlay-bg: #c1c0c0; --lighter-border: #c1c0c04f; --progress-bg: #33383d; --table-dark-row: rgba(255, 255, 255, 0.039); --popup-darker-layer: rgba(0, 0, 0, 0.651); --green-overlay: #63bb2d22; --lighter-overlay: #ffffff0a; --orange: #FF991F; --darkOrange: #FF5630; --purple: #0052CC; --light-red: #ff6b6b; /* New colors needed for the course builder */ --success-color: var(--green); /* Map success to existing green */ --error-color: var(--red); /* Map error to existing red */ --warning-color: var(--yellow); /* Map warning to existing yellow */ --info-color: var(--base-color); /* Map info to base color */ /* New shades and variations needed */ --base-color-light: rgba(176, 160, 254, 0.1); --base-color-lighter: rgba(176, 160, 254, 0.05); --overlay-dark: rgba(0, 0, 0, 0.7); --overlay-light: rgba(255, 255, 255, 0.9); --border-color: var(--lighter-light); --text-muted: var(--lighter-light); --input-background: var(--base-background); --input-border: var(--lighter-light); --input-focus-border: var(--base-color); --button-secondary-bg: var(--card-background); --button-secondary-border: var(--lighter-light); --button-secondary-text: var(--light); --modal-overlay: rgba(0, 0, 0, 0.7); --tooltip-background: rgba(0, 0, 0, 0.9); --shadow-color: rgba(0, 0, 0, 0.2); --success-gradient: linear-gradient(90deg, #4CAF50, #8BC34A); --success-green: #4CAF50; --success-green-light: #8BC34A; --overlay-medium: rgba(0, 0, 0, 0.5); --overlay-lightest: rgba(0, 0, 0, 0.1); --overlay-white: #fff; --shadow-light: rgba(0, 0, 0, 0.05); --shadow-medium: rgba(0, 0, 0, 0.1); --shadow-strong: rgba(0, 0, 0, 0.2); } /* 3A86FF */ :root[data-theme="light"] { --font-primary: 'Poppins', sans-serif; --font-heading: 'Bebas Neue', sans-serif; /* === INVERTED FROM DARK MODE === All backgrounds flipped from dark → light All text flipped from light → dark All overlays: same alpha, inverted base Accents: keep hue, adjust for light BG */ /* Base & Accent */ --base-color-rgb: 100, 80, 220; /* Slightly adjusted for clarity on light */ --base-color: #6450DC; --hover-color: #5a44c5; /* Backgrounds: inverted */ --base-background: #ffffff; /* was #050810 */ --card-background: #f8f9fc; /* was #0D1018 → light gray */ --card-background-rgb: 248, 249, 252; --card-background-overlay: #f8f9fcdb; /* was #0d1018cf → same alpha, light */ --dash-bg: #eeeeee; /* was #121212 */ --dash-tab-bg: rgba(0, 0, 0, 0.05); /* was rgba(255,255,255,0.05) */ --dash-action-bg: #cccccc; /* was #30303044 → rgba(204,204,204,0.27) */ /* Text & Contrast */ --text-color: #000000; /* was #000000 in dark → but used on cards, so OK */ --dark: #ffffff; /* was #000000 → inverted */ --light: #000000; /* was #ffffff → inverted */ --lighter-white: #000000e6; /* was #ffffff25 → 15% white → now 89% black */ --lighter-greyish: #000000a4; /* was #ffffff5b → now ~65% black */ --greyish: #4c4c4c; /* was #a3a3a3 → inverted to mid-dark */ --base-lighter: #6450DC1a; /* was #b0a0fe25 → lighter tint of base */ --light-card: #000000; /* was #eeeeee → now black */ --dark-btn: #eeeeee; /* was #101014 → now light */ --dark-lighter: #eeeeeea1; /* was #101014a1 */ --lighter-light: #909090; /* was #6f6f6f → inverted */ --lighter-dark: #2d2d2d; /* was #d2cfcf8b → now dark gray */ --lighter-light-overlay-bg: #3e3f3f; /* was #c1c0c0 */ --lighter-border: #3e3f3f4f; /* was #c1c0c04f */ /* Borders */ --dash-border: rgba(0, 0, 0, 0.249); /* was rgba(255,255,255,0.249) */ --progress-bg: #cccccc; /* was #33383d */ /* Table */ --table-dark-row: rgba(0, 0, 0, 0.039); /* was rgba(255,255,255,0.039) */ /* Overlays */ --popup-darker-layer: rgba(255, 255, 255, 0.651); /* was rgba(0,0,0,0.651) */ --green-overlay: #63bb2d22; /* keep same — green tint on light BG */ --lighter-overlay: #0000000a; /* was #ffffff0a */ /* Semantic Colors — keep hue, ensure contrast */ --green: #63bb2d; --yellow: #FFC107; --red: #FF2F2F; --orange: #FF991F; --darkOrange: #FF5630; --purple: #0052CC; --light-red: #ff6b6b; /* Success, Error, etc. */ --success-color: var(--green); --error-color: var(--red); --warning-color: var(--yellow); --info-color: var(--base-color); /* Shades */ --base-color-light: rgba(100, 80, 220, 0.1); --base-color-lighter: rgba(100, 80, 220, 0.05); /* Overlays */ --overlay-dark: rgba(255, 255, 255, 0.7); --overlay-light: rgba(0, 0, 0, 0.9); --overlay-medium: rgba(255, 255, 255, 0.5); --overlay-lightest: rgba(255, 255, 255, 0.1); --overlay-white: #000000; /* Input */ --input-background: #f8f9fc; --input-border: #4c4c4c; --input-focus-border: #6450DC; /* Buttons */ --button-secondary-bg: #f8f9fc; --button-secondary-border: #4c4c4c; --button-secondary-text: #000000; /* Modal & Tooltip */ --modal-overlay: rgba(255, 255, 255, 0.7); --tooltip-background: rgba(255, 255, 255, 0.9); --shadow-color: rgba(0, 0, 0, 0.1); --shadow-light: rgba(0, 0, 0, 0.05); --shadow-medium: rgba(0, 0, 0, 0.1); --shadow-strong: rgba(0, 0, 0, 0.15); /* Gradient */ --success-gradient: linear-gradient(90deg, #4CAF50, #8BC34A); --success-green: #4CAF50; --success-green-light: #8BC34A; /* Golden */ --golden-start: #FD961E; }