/* variables.css — Vendraly Design Token System * All themes defined here. Components use var(--token). * Applied via data-theme attribute on . */ /* ═══════════════════════════════════════════════ THEME 1: vendraly-light (default) Clean light UI with slate accents ═══════════════════════════════════════════════ */ [data-theme="vendraly-light"], :root { --bg-app: #f1f5f9; --bg-panel: #fff; --bg-card: #fff; --bg-sidebar: #1e293b; --bg-header: #1e293b; --bg-input: #fff; --bg-hover: #f8fafc; --bg-table-header: #f9fafb; --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; --text-on-sidebar: #cbd5e1; --text-on-sidebar-active: #fff; --text-on-header: #fff; --text-on-accent: #fff; --accent: #5b7cfa; --accent-hover: #4a6ae8; --accent-light: #eff3ff; --accent-purple: #7b2cff; --accent-purple-hover: #6620e8; --border: #e2e8f0; --border-strong: #cbd5e1; --border-input: #d1d5db; --success: #059669; --success-light: #d1fae5; --success-text: #065f46; --warning: #f59e0b; --warning-light: #fef3c7; --warning-text: #92400e; --danger: #dc2626; --danger-light: #fee2e2; --danger-text: #991b1b; --chip-bg: #f1f5f9; --chip-text: #475569; --chip-accent-bg: #eff3ff; --chip-accent-text: #3b5998; --input-border: #d1d5db; --input-bg: #fff; --input-text: #1e293b; --input-focus: #5b7cfa; --tab-active: #5b7cfa; --tab-active-text: #fff; --tab-inactive: transparent; --tab-inactive-text: rgba(255,255,255,.65); --sidebar-icon-bg: #334155; --sidebar-icon-hover: #475569; --sidebar-icon-active: #3b4f6e; --sidebar-active-border: #5b7cfa; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; color-scheme: light; } /* ═══════════════════════════════════════════════ THEME 2: vendraly-dark True dark with high contrast ═══════════════════════════════════════════════ */ [data-theme="vendraly-dark"] { --bg-app: #0a0a0f; --bg-panel: #111118; --bg-card: #18181f; --bg-sidebar: #0a0a0f; --bg-header: #111118; --bg-input: #1a1a24; --bg-hover: #1f1f2a; --bg-table-header: #131318; --text-primary: #e8eaed; --text-secondary: #a0a4b0; --text-muted: #6b7080; --text-on-sidebar: #8890a0; --text-on-sidebar-active: #fff; --text-on-header: #e8eaed; --text-on-accent: #fff; --accent: #7b9dfa; --accent-hover: #5b7cfa; --accent-light: rgba(91,124,250,.12); --accent-purple: #9b7fff; --accent-purple-hover: #7b2cff; --border: #2a2a3a; --border-strong: #3a3a4a; --border-input: #333345; --success: #34d399; --success-light: rgba(52,211,153,.12); --success-text: #34d399; --warning: #fbbf24; --warning-light: rgba(251,191,36,.12); --warning-text: #fbbf24; --danger: #f87171; --danger-light: rgba(248,113,113,.12); --danger-text: #f87171; --chip-bg: #222230; --chip-text: #a0a4b0; --chip-accent-bg: rgba(91,124,250,.15); --chip-accent-text: #7b9dfa; --input-border: #333345; --input-bg: #1a1a24; --input-text: #e8eaed; --input-focus: #7b9dfa; --tab-active: #7b9dfa; --tab-active-text: #fff; --tab-inactive: transparent; --tab-inactive-text: #6b7080; --sidebar-icon-bg: #1a1a24; --sidebar-icon-hover: #2a2a3a; --sidebar-icon-active: #222238; --sidebar-active-border: #7b9dfa; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 8px 24px rgba(0,0,0,.5); color-scheme: dark; } /* ═══════════════════════════════════════════════ DARK-MODE FIXES — override hardcoded #fff in module CSS These selectors target components that use #fff without variables. Applied to all dark themes via :is() selector. ═══════════════════════════════════════════════ */ :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .stat-card, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .log-card, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .agenda-view, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .mail-list, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .mail-reader, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .mail-item:hover, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .drive-card { background: var(--bg-card) !important; color: var(--text-primary) !important; } :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-content, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-box { background: var(--bg-card) !important; color: var(--text-primary) !important; } :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-content input, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-content select, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-content textarea, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-content input:focus, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-content select:focus { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .log-tabs, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .pdb, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .fin-btn-cancel { background: var(--bg-hover) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .log-table th, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .log-table tr:hover td { background: var(--bg-hover) !important; } :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-content h2, :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .modal-content label { color: var(--text-primary) !important; } :is([data-theme="vendraly-dark"], [data-theme="vendraly-discord"], [data-theme="vendraly-ash"]) .fin-close-btn:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } /* ═══════════════════════════════════════════════ THEME 3: vendraly-discord Discord-inspired blue-gray ═══════════════════════════════════════════════ */ [data-theme="vendraly-discord"] { --bg-app: #36393f; --bg-panel: #2f3136; --bg-card: #36393f; --bg-sidebar: #202225; --bg-header: #2f3136; --bg-input: #40444b; --bg-hover: #3a3d44; --bg-table-header: #2b2d31; --text-primary: #dcddde; --text-secondary: #b9bbbe; --text-muted: #72767d; --text-on-sidebar: #96989d; --text-on-sidebar-active: #fff; --text-on-header: #dcddde; --text-on-accent: #fff; --accent: #5865f2; --accent-hover: #4752c4; --accent-light: rgba(88,101,242,.15); --accent-purple: #7b2cff; --accent-purple-hover: #6620e8; --border: #40444b; --border-strong: #4f545c; --border-input: #40444b; --success: #3ba55c; --success-light: rgba(59,165,92,.15); --success-text: #3ba55c; --warning: #faa61a; --warning-light: rgba(250,166,26,.15); --warning-text: #faa61a; --danger: #ed4245; --danger-light: rgba(237,66,69,.15); --danger-text: #ed4245; --chip-bg: #40444b; --chip-text: #b9bbbe; --chip-accent-bg: rgba(88,101,242,.2); --chip-accent-text: #7b8cf8; --input-border: #40444b; --input-bg: #40444b; --input-text: #dcddde; --input-focus: #5865f2; --tab-active: #5865f2; --tab-active-text: #fff; --tab-inactive: transparent; --tab-inactive-text: #72767d; --sidebar-icon-bg: #2f3136; --sidebar-icon-hover: #393c43; --sidebar-icon-active: #3a3d44; --sidebar-active-border: #5865f2; --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 12px rgba(0,0,0,.3); --shadow-lg: 0 8px 24px rgba(0,0,0,.4); color-scheme: dark; } /* ═══════════════════════════════════════════════ THEME 4: vendraly-ash Soft ash gray — calm, muted ═══════════════════════════════════════════════ */ [data-theme="vendraly-ash"] { --bg-app: #1a1d23; --bg-panel: #22262e; --bg-card: #282c34; --bg-sidebar: #15171c; --bg-header: #22262e; --bg-input: #2c3039; --bg-hover: #2e333c; --bg-table-header: #1f2228; --text-primary: #d4d7dc; --text-secondary: #9ba1ad; --text-muted: #6b7080; --text-on-sidebar: #848a96; --text-on-sidebar-active: #e4e7ec; --text-on-header: #d4d7dc; --text-on-accent: #fff; --accent: #6c8cfa; --accent-hover: #5b7cfa; --accent-light: rgba(108,140,250,.12); --accent-purple: #8b6cfa; --accent-purple-hover: #7b5cf0; --border: #333842; --border-strong: #3e4450; --border-input: #3a3f4a; --success: #4ade80; --success-light: rgba(74,222,128,.12); --success-text: #4ade80; --warning: #facc15; --warning-light: rgba(250,204,21,.12); --warning-text: #facc15; --danger: #f87171; --danger-light: rgba(248,113,113,.12); --danger-text: #f87171; --chip-bg: #2c3039; --chip-text: #9ba1ad; --chip-accent-bg: rgba(108,140,250,.15); --chip-accent-text: #8ba4fa; --input-border: #3a3f4a; --input-bg: #2c3039; --input-text: #d4d7dc; --input-focus: #6c8cfa; --tab-active: #6c8cfa; --tab-active-text: #fff; --tab-inactive: transparent; --tab-inactive-text: #6b7080; --sidebar-icon-bg: #22262e; --sidebar-icon-hover: #2c3039; --sidebar-icon-active: #2e333c; --sidebar-active-border: #6c8cfa; --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 12px rgba(0,0,0,.3); --shadow-lg: 0 8px 24px rgba(0,0,0,.4); color-scheme: dark; }