/* ============================================================ theme-light.css Light mode colour tokens. Applied when is set. Dark mode tokens live inline on :root in index.html (they are the default / fallback). ============================================================ */ [data-theme="light"] { /* Surfaces */ --color-bg: #f4f6fb; --color-surface: #ffffff; --color-surface-2: #f0f2f9; --color-hover: rgba(0, 0, 0, 0.05); /* Borders */ --color-border: #d8dce8; /* Text */ --color-text: #111827; --color-muted: #5c6680; /* Title gradient */ --grad-title: linear-gradient(135deg, #111827 30%, var(--accent)); /* Shadow adjustment */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.16); } /* Textarea text in light mode */ [data-theme="light"] .panel__textarea { color: var(--color-text); } /* Scrollbar in light mode */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c5cad8; } /* Score ring track */ [data-theme="light"] .ring__track { stroke: var(--color-surface-2); } /* Highlighted text override already handled in components.css */