/* APS Theme Variables - Centralized CSS variables for light/dark theming - Components and pages consume these tokens */ :root { /* Typography */ --font-body: 'Handlee', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Lato', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* Neutrals */ --bg: #0f0f0f; /* default assumes dark until themed */ --surface: #161616; --surface-alt: #1f1f1f; /* Slightly higher-contrast border for dark base */ --border: rgba(255, 255, 255, 0.16); --border-alt3: rgba(255, 255, 255, 0.75); --text: #f4f4f4; --text-muted: #c2c2c2; /* Accents */ --accent: #e09a68; /* Icons & semantic (fallbacks; themed below) */ --icon: var(--text); --icon-muted: color-mix(in oklab, var(--text) 70%, var(--bg) 30%); --danger: #c85a5a; --warning: #c18a2a; --success: #3ea05d; /* Cards */ --card-gradient-top: #1d1d1d; --card-gradient-bottom: #151515; --card-bg: #1a1a1a; --card-border: rgba(255, 255, 255, 0.08); --card-shadow: 0 14px 45px rgba(0, 0, 0, 0.35); /* Filters */ --filter-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); /* Split menu (entry type) defaults */ --split-menu-bg: radial-gradient(circle at top left, color-mix(in oklab, var(--surface) 90%, var(--surface-alt) 10%) 0%, color-mix(in oklab, var(--surface) 70%, transparent 30%) 55%, color-mix(in oklab, var(--surface) 60%, transparent 40%) 100%); --split-menu-border: var(--border); --split-menu-shadow: 0 0 0 1px #000000, 0 10px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.7); } /* Light theme tokens */ html[data-theme="light"] { --bg: #fffdf6; --surface: #fffdf6; --surface-alt: #f7f3e5; --surface-alt2: #fffdf5; /* Higher-contrast border for light base */ --border: rgba(0, 0, 0, 0.18); --border-alt3: rgba(0, 0, 0, 0.75); --text: #2b2415; --text-sharp: #1f1a0e; /* warm ink */ --text-muted: #686660; --accent: #b85c2f; --accent-ok: #6db82f; --light-text: #444444; --button-add: #81da93; /* Slightly warmer notebook-like cards */ --card-gradient-top: #fffaea; --card-gradient-bottom: #f5ecd4; /* was #f7f0dd */ --card-bg: #fff3c4; /* was #fef3cb */ --card-border: rgba(190, 170, 130, 0.55); --card-shadow: 0 14px 45px rgba(165, 144, 106, 0.16); --filter-shadow: 0 2px 16px rgba(0, 0, 0, 0.12); /* Icon/semantic colors tuned to reduce brown cast on light bg */ --icon: color-mix(in oklab, var(--text) 70%, #333 30%); --icon-muted: color-mix(in oklab, var(--text) 55%, #666 45%); --danger: #b64b4b; --warning: #b07a1f; --success: #3b8f54; /* Split menu - light */ --split-menu-bg: radial-gradient(circle at top left, color-mix(in oklab, var(--surface) 92%, var(--surface-alt) 8%) 0%, color-mix(in oklab, var(--surface-alt) 85%, transparent 15%) 55%, color-mix(in oklab, var(--surface) 80%, transparent 20%) 100%); --split-menu-border: color-mix(in oklab, var(--border) 80%, black 20%); --split-menu-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65), 0 10px 24px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.18); } /* Dark theme tokens */ html[data-theme="dark"] { --bg: #101010; --surface: #161616; --surface-alt: #1b1b1b; --surface-alt2: #1e1e1e; --border: rgba(255, 255, 255, 0.16); --border-alt3: rgba(255, 255, 255, 0.75); --text: #f2f2f2; --text-muted: #bdbdbd; --accent: #ff8a35; --accent-ok: #86ff35; --light-text: #b0b0b0; --button-add: #3fb56f; --card-gradient-top: #1d1d1d; --card-gradient-bottom: #151515; --card-bg: #454026; --card-border: rgba(255, 255, 255, 0.08); --card-shadow: 0 14px 45px rgba(0, 0, 0, 0.35); --filter-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); /* Icon/semantic for dark: slightly brighter for readability */ --icon: color-mix(in oklab, var(--text) 90%, white 10%); --icon-muted: color-mix(in oklab, var(--text) 60%, var(--bg) 40%); --danger: #c85a5a; --warning: #be9b5e; --success: #59b476; /* Split menu - dark */ --split-menu-bg: radial-gradient(circle at top left, color-mix(in oklab, var(--surface) 90%, var(--surface-alt) 10%) 0%, color-mix(in oklab, var(--surface) 70%, transparent 30%) 55%, color-mix(in oklab, var(--surface) 60%, transparent 40%) 100%); --split-menu-border: var(--border); --split-menu-shadow: 0 0 0 1px #000000, 0 10px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.7); } /* System dark when user hasn't explicitly chosen */ @media (prefers-color-scheme: dark) { html:not([data-theme]), html[data-theme="system"] { --bg: #101010; --surface: #161616; --surface-alt: #1b1b1b; --surface-alt2: #1e1e1e; --border: rgba(255, 255, 255, 0.16); --border-alt3: rgba(255, 255, 255, 0.75); --text: #f2f2f2; --text-muted: #bdbdbd; --light-text: #b0b0b0; --accent: #ff8a35; --accent-ok: #75ff52; --card-gradient-top: #1d1d1d; --card-gradient-bottom: #151515; --card-bg: #1a1a1a; --card-border: rgba(255, 255, 255, 0.08); --card-shadow: 0 14px 45px rgba(0, 0, 0, 0.35); --button-add: #3fb56f; --filter-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); --icon: color-mix(in oklab, var(--text) 90%, white 10%); --icon-muted: color-mix(in oklab, var(--text) 60%, var(--bg) 40%); --danger: #c85a5a; --warning: #be9b5e; --success: #59b476; } } /* System light when user hasn't explicitly chosen */ @media (prefers-color-scheme: light) { html:not([data-theme]), html[data-theme="system"] { --bg: #fffdf6; --surface: #fffdf6; --surface-alt: #f7f3e5; --surface-alt2: #fffdf5; --border: rgba(0, 0, 0, 0.18); --border-alt3: rgba(0, 0, 0, 0.75); --text: #2b2415; --text-sharp: #1f1a0e; --text-muted: #686660; --accent: #b85c2f; --accent-ok: #75ff52; --light-text: #444444; --button-add: #81da93; --card-gradient-top: #fff9e8; --card-gradient-bottom: #f7f0dd; --card-bg: #fff2c9; --card-border: rgba(190, 170, 130, 0.55); --card-shadow: 0 14px 45px rgba(163, 125, 60, 0.16); --filter-shadow: 0 2px 16px rgba(0, 0, 0, 0.12); --icon: color-mix(in oklab, var(--text) 70%, #333 30%); --icon-muted: color-mix(in oklab, var(--text) 55%, #666 45%); --danger: #b64b4b; --warning: #b07a1f; --success: #3b8f54; } }