/* ========================================================================== TSD File Management System — dark theme overrides Activated when is set by js/utils.js (applyTheme). ========================================================================== */ :root[data-theme='dark'] { --color-bg: #12151c; --color-surface: #1a1e27; --color-surface-alt: #20242f; --color-surface-hover: #262b38; --color-border: #2c313d; --color-border-strong: #3a4150; --color-text: #e7eaf0; --color-text-secondary: #b0b8c6; --color-text-muted: #7c8698; --color-accent: #5b8def; --color-accent-hover: #75a0f2; --color-accent-soft: rgba(91, 141, 239, 0.16); --color-accent-contrast: #0b1220; --color-danger: #ef5350; --color-danger-soft: rgba(239, 83, 80, 0.14); --color-warning: #e0a940; --color-warning-soft: rgba(224, 169, 64, 0.14); --color-success: #4cbf87; --color-success-soft: rgba(76, 191, 135, 0.14); --color-focus-ring: rgba(91, 141, 239, 0.45); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; } :root[data-theme='dark'] .auth-page { background: linear-gradient(155deg, var(--color-bg) 0%, #182238 100%); } :root[data-theme='dark'] .modal-backdrop { background: rgba(4, 6, 12, 0.65); } :root[data-theme='dark'] .btn-primary { color: #0b1220; } :root[data-theme='dark'] ::selection { background: rgba(91, 141, 239, 0.35); } :root[data-theme='dark'] .preview-viewer iframe { background: #ffffff; }