/* OriginAI Labs LMS — dark theme extension Brand hues use the on-dark lifts the brand kit defines; neutrals re-anchor the ramp. Tones (via [data-dark-tone] on , default = graphite): - graphite (default): warm amber-tinted greys, ground #171411 - stone: lighter warm grey, ground #232019 - black: the original pitch-black theme, ground #000000 Scope: [data-theme="dark"]. Absence of the attribute = the shipped light theme. */ :root { --true-white: #FFFFFF; --gradient-ring: linear-gradient(135deg, #3D52E0 0%, #D08A18 100%); /* @kind color */ --presence-online: #03C95A; } [data-theme="dark"] { /* --- shared across all dark tones: brand, semantic, focus --- */ --color-primary: var(--brand-ultramarine-lift); --color-primary-hover: #7183F5; --color-primary-active: #7183F5; --color-primary-disabled: #39406B; --color-on-primary: var(--true-white); --color-secondary: var(--brand-amber-lift); --color-secondary-hover: #F0BC5E; --color-secondary-active: #F0BC5E; --color-on-secondary: #14161C; --success: #22D97F; --success-hover: #16B266; --info: #8B6BFF; --info-hover: #7454F0; --warning: #FFC733; --warning-hover: #E0AC1A; --danger: #FF5A5A; --danger-hover: #E03B3B; --purple: #C266D1; --pink: #FF5FA8; --skyblue: #3FD9F5; --teal: #1CC3D0; --text-primary: var(--gray-900); --text-secondary: var(--gray-500); --text-tertiary: var(--gray-400); --text-disabled: var(--gray-300); --text-link: var(--color-primary); --text-link-hover: var(--color-secondary); --border-focus: var(--color-primary); --focus-ring: 0 0 0 3px rgba(90,108,240,.42); --gradient-brand: linear-gradient(10.93deg, #3D52E0 16.22%, #7183F5 120.13%); /* @kind color */ --gradient-amber: linear-gradient(135deg, #B0740F 0%, #F0BC5E 100%); /* @kind color */ --gradient-ring: linear-gradient(135deg, #5A6CF0 0%, #E5A83B 100%); /* @kind color */ --presence-online: #22D97F; /* --- graphite (default): warm greys keyed to the amber, hue ~40deg --- */ --brand-ink: #100E0B; --white: #211E19; --light-100: #171411; --light-200: #1B1815; --light-300: #1D1A16; --light-400: #262220; --light-500: #2A2622; --light-600: #2A2622; --light-700: #2D2925; --light-800: #322D28; --light-900: #171411; --light: #171411; --gray-100: #3A352F; --gray-200: #494339; --gray-300: #6E675C; --gray-400: #9A9287; --gray-500: #B7AFA3; --gray-600: #C6BEB3; --gray-700: #D5CEC4; --gray-800: #E5DFD6; --gray-900: #F7F3EC; --primary-transparent: #232433; --secondary-transparent: #33270F; --success-transparent: #14291C; --warning-transparent: #302711; --danger-transparent: #331B17; --info-transparent: #251E38; --pink-transparent: #331D26; --purple-transparent: #2C1F30; --skyblue-transparent: #162C32; --dark-transparent: #2E2A25; --surface-page: #171411; --surface-page-alt: #201D19; --surface-card: #211E19; --surface-raised: #2A2622; --surface-sunken: #322D28; --surface-inverse: #F7F3EC; --text-inverse: #1C1813; --border-subtle: #2B2723; --border-default: #3A352F; --border-strong: #4C463E; --overlay: rgba(14,12,9,.72); --elevation-1: 0px 4px 4px 0px rgba(10,8,5,.35); --elevation-2: 0px 2px 5px 0px rgba(10,8,5,.45); --elevation-3: 0px 4px 10px 0px rgba(10,8,5,.45); --elevation-4: 0px 8px 24px 0px rgba(10,8,5,.55); --shadow-xs: 0px 1px 1px 1px rgba(10,8,5,.30); --shadow-drop: 0px 4px 14px 0px rgba(10,8,5,.40); --gradient-ink: linear-gradient(135deg, #171411 0%, #3D52E0 100%); /* @kind color */ } /* --- stone: a step lighter, softer contrast --- */ [data-theme="dark"][data-dark-tone="stone"] { --brand-ink: #14110D; --white: #2C2823; --light-100: #232019; --light-200: #27231D; --light-300: #29251F; --light-400: #302C25; --light-500: #353128; --light-600: #353128; --light-700: #393429; --light-800: #3D3830; --light-900: #232019; --light: #232019; --gray-100: #453F36; --gray-200: #544D42; --gray-300: #786F62; --gray-400: #A2998C; --gray-500: #BDB6AB; --gray-600: #CBC4B9; --gray-700: #D9D3C9; --gray-800: #E8E3DA; --gray-900: #F8F5EF; --primary-transparent: #2C2E3E; --secondary-transparent: #3D3018; --success-transparent: #1D3325; --warning-transparent: #3A3019; --danger-transparent: #3D241F; --info-transparent: #2E2741; --pink-transparent: #3D262F; --purple-transparent: #362839; --skyblue-transparent: #1F353B; --dark-transparent: #38332C; --surface-page: #232019; --surface-page-alt: #2B2721; --surface-card: #2C2823; --surface-raised: #353128; --surface-sunken: #3D3830; --surface-inverse: #F8F5EF; --text-inverse: #1C1813; --border-subtle: #363129; --border-default: #453F36; --border-strong: #575046; --overlay: rgba(20,17,13,.70); --elevation-1: 0px 4px 4px 0px rgba(12,10,7,.30); --elevation-2: 0px 2px 5px 0px rgba(12,10,7,.40); --elevation-3: 0px 4px 10px 0px rgba(12,10,7,.40); --elevation-4: 0px 8px 24px 0px rgba(12,10,7,.50); --shadow-xs: 0px 1px 1px 1px rgba(12,10,7,.25); --shadow-drop: 0px 4px 14px 0px rgba(12,10,7,.35); --gradient-ink: linear-gradient(135deg, #232019 0%, #3D52E0 100%); /* @kind color */ } /* --- black: the original pitch-black theme --- */ [data-theme="dark"][data-dark-tone="black"] { --brand-ink: #1A1A1A; --white: #0A0A0A; --light-100: #000000; --light-200: #050505; --light-300: #070707; --light-400: #101010; --light-500: #141414; --light-600: #141414; --light-700: #161616; --light-800: #1A1A1A; --light-900: #000000; --light: #000000; --gray-100: #232323; --gray-200: #333333; --gray-300: #5A5A5A; --gray-400: #8A8A8A; --gray-500: #ABABAB; --gray-600: #BDBDBD; --gray-700: #CFCFCF; --gray-800: #E3E3E3; --gray-900: #FAFAFA; --primary-transparent: #17192E; --secondary-transparent: #251C09; --success-transparent: #082014; --warning-transparent: #221C0B; --danger-transparent: #251111; --info-transparent: #19122D; --pink-transparent: #26121C; --purple-transparent: #201325; --skyblue-transparent: #0A2129; --dark-transparent: #1C1C1C; --surface-page: #000000; --surface-page-alt: #0F0F0F; --surface-card: #0A0A0A; --surface-raised: #141414; --surface-sunken: #1A1A1A; --surface-inverse: #FAFAFA; --text-inverse: #14161C; --border-subtle: #171717; --border-default: #232323; --border-strong: #333333; --overlay: rgba(0,0,0,.78); --elevation-1: 0px 4px 4px 0px rgba(0,0,0,.55); --elevation-2: 0px 2px 5px 0px rgba(0,0,0,.70); --elevation-3: 0px 4px 10px 0px rgba(0,0,0,.70); --elevation-4: 0px 8px 24px 0px rgba(0,0,0,.80); --shadow-xs: 0px 1px 1px 1px rgba(0,0,0,.50); --shadow-drop: 0px 4px 14px 0px rgba(0,0,0,.60); --gradient-ink: linear-gradient(135deg, #000000 0%, #3D52E0 100%); /* @kind color */ } [data-theme="dark"] body { background: var(--surface-page); color: var(--text-primary); } [data-theme="dark"] img[src$=".jpg"] { filter: brightness(.88); }