/* * Busy design tokens — shared across login.html, notebooks.html, editor.html. * * Mirrors the look of the sibling apps (VoxelFlow / PhraseJar): self-hosted * Inter Variable, an OKLCH palette, shadcn-style radii/focus rings, and a * class-based dark mode (`.dark` on , persisted to localStorage). * * The legacy variable names the pages already consume (--color-primary, * --bg-card, --text-color, …) are re-pointed here, so theming + dark mode flow * through the existing CSS with no per-rule churn. Soft tint backgrounds are * derived with color-mix() from a base colour + a surface token, so they adapt * to light/dark automatically (both --bg-card and --text-color flip). */ /* ── Inter Variable (self-hosted; CSP default-src 'self' blocks font CDNs) ── */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Variable'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Variable'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-ext-wght-italic.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Light theme (default) ── */ :root { color-scheme: light; /* Typography */ --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Surfaces & text (these flip in dark mode) */ --bg-color: oklch(0.985 0.002 247); /* page background */ --bg-card: oklch(1 0 0); /* cards, editor, modals */ --bg-alt: oklch(0.965 0.006 255); /* subtle alt fill */ --header-bg: oklch(0.992 0.002 247); /* menu bar */ --text-color: oklch(0.21 0.02 262); --text-color-light: oklch(0.5 0.02 260); --text-color-muted: oklch(0.62 0.018 260); --border-color: oklch(0.91 0.01 255); --border-color-strong: oklch(0.84 0.012 255); /* Brand / semantic colours (tuned to read with white text as button fills AND as coloured text; kept stable across modes — see editor.css for the few dark-mode text-legibility overrides). */ --color-primary: oklch(0.55 0.17 255); --color-primary-hover: oklch(0.49 0.18 255); --color-secondary: oklch(0.55 0.02 260); --color-secondary-hover: oklch(0.46 0.02 260); --color-success: oklch(0.62 0.15 160); --color-warning: oklch(0.72 0.16 72); --color-danger: oklch(0.585 0.22 27); --color-danger-hover: oklch(0.52 0.21 27); --color-accent-indigo: oklch(0.5 0.18 278); --ring: var(--color-primary); /* Soft tints — derived so they auto-adapt to the active surface. */ --success-soft-bg: color-mix(in oklab, var(--color-success) 16%, var(--bg-card)); --success-soft-fg: color-mix(in oklab, var(--color-success) 72%, var(--text-color)); --warning-soft-bg: color-mix(in oklab, var(--color-warning) 20%, var(--bg-card)); --warning-soft-fg: color-mix(in oklab, var(--color-warning) 72%, var(--text-color)); --danger-soft-bg: color-mix(in oklab, var(--color-danger) 14%, var(--bg-card)); --danger-soft-fg: color-mix(in oklab, var(--color-danger) 80%, var(--text-color)); --info-soft-bg: color-mix(in oklab, var(--color-accent-indigo) 12%, var(--bg-card)); --info-soft-fg: color-mix(in oklab, var(--color-accent-indigo) 82%, var(--text-color)); /* Editor task semantics (text colours; brightened in dark mode below) */ --task-today-color: var(--color-primary); --task-future-color: var(--color-success); --task-overdue-color: var(--color-danger); --task-progress-color: var(--color-success); --task-time-color: var(--color-warning); --note-color: oklch(0.62 0.12 252); /* Radii (modest bump toward the shadcn 10px base; corner-only, no layout impact) and shadows. */ --radius: 0.625rem; --border-radius-sm: 0.375rem; --border-radius-md: 0.5rem; --shadow-sm: 0 1px 2px 0 oklch(0.2 0.02 262 / 0.06); --shadow-md: 0 4px 10px -2px oklch(0.2 0.02 262 / 0.12), 0 2px 4px -2px oklch(0.2 0.02 262 / 0.08); } /* ── Dark theme (VoxelFlow deep-navy set) ── */ html.dark { color-scheme: dark; --bg-color: oklch(0.15 0.012 252); --bg-card: oklch(0.185 0.014 252); --bg-alt: oklch(0.235 0.02 264); --header-bg: oklch(0.165 0.014 252); --text-color: oklch(0.93 0.008 255); --text-color-light: oklch(0.71 0.015 257); --text-color-muted: oklch(0.6 0.015 257); --border-color: oklch(0.3 0.02 264); --border-color-strong: oklch(0.4 0.022 264); /* Brand colours nudged a touch brighter for dark fills/text. White button text still reads on these. */ --color-primary: oklch(0.58 0.17 255); --color-primary-hover: oklch(0.64 0.16 255); --color-secondary: oklch(0.7 0.02 260); --color-secondary-hover: oklch(0.78 0.02 260); --color-success: oklch(0.64 0.15 160); --color-warning: oklch(0.74 0.16 75); --color-danger: oklch(0.62 0.22 25); --color-danger-hover: oklch(0.68 0.2 25); --color-accent-indigo: oklch(0.66 0.16 278); /* Editor text wants more pop on the dark surface than the button fills do. */ --task-today-color: oklch(0.8 0.13 205); --task-future-color: oklch(0.76 0.15 160); --task-overdue-color: oklch(0.72 0.19 25); --task-progress-color: oklch(0.78 0.16 160); --task-time-color: oklch(0.82 0.14 78); --note-color: oklch(0.74 0.1 252); --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.4); --shadow-md: 0 4px 12px -2px oklch(0 0 0 / 0.5), 0 2px 4px -2px oklch(0 0 0 / 0.4); } /* ── Shared base niceties ── */ html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* shadcn-style focus ring on interactive controls only — never the editor. */ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid color-mix(in oklab, var(--ring) 55%, transparent); outline-offset: 2px; } /* Theme-toggle button: square icon button that sits in the menu bar. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem; line-height: 0; color: var(--text-color-light); } .theme-toggle:hover { color: var(--text-color); } .theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; } /* Show the moon in light mode, the sun in dark mode. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.dark .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: none; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }