/* ========================================================================== tokens.css Single source of truth for the app's design tokens (CSS custom properties). Loaded first by both views/home.ejs (the authenticated shell) and views/login.ejs (the standalone auth page) so every stylesheet in the app — including login.css — draws from the same palette instead of each file inventing its own. Previously this :root block lived inside home.css, a page-specific file that happened to always load first — fragile, since nothing stopped a future edit to home.css from silently deleting the site's only token source. It's a dedicated file now for exactly that reason. ========================================================================== */ :root { /* --- Brand / primary accent: a soft indigo, not a loud solid fill. --color-primary is the everyday accent (links, active states, icons, focus rings). --color-primary-strong is reserved for hover/active states and the single solid-fill CTA per view. --color-primary-soft-* back the tinted "soft fill" button/badge variant that secondary actions should default to instead of a heavy solid fill. */ --color-primary: #6366f1; --color-primary-strong: #4f46e5; --color-primary-soft-bg: #eef2ff; --color-primary-soft-text: #4338ca; --color-primary-border: #c7d2fe; /* Back-compat aliases for older call sites not yet migrated to the names above. */ --color-primary-dark: var(--color-primary-strong); --color-primary-hover: var(--color-primary-strong); /* --- Surfaces --- */ --color-surface: #ffffff; --color-surface-muted: #f8fafc; --color-surface-hover: #f1f5f9; --color-background: var(--color-surface-muted); /* --- Borders --- */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; --border-color: var(--color-border); /* --- Text --- */ --color-text-primary: #0f172a; --color-text-secondary: #334155; --color-text-muted: #64748b; --color-text-main: var(--color-text-primary); /* --- Semantic status colors --- */ --color-danger: #dc3545; --color-danger-strong: #c82333; --color-danger-bg: #fee2e2; --color-success: #16a34a; --color-success-strong: #15803d; --color-success-bg: #dcfce7; --color-warning: #f59e0b; --color-warning-strong: #d97706; --color-warning-bg: #fef3c7; /* --- Radius scale --- */ --radius-sm: 4px; --radius-md: 8px; --radius-pill: 9999px; --border-radius: var(--radius-md); /* --- Elevation / shadow scale --- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* -------------------------------------------------------------------------- Dark theme overrides (Pitch Black / Pure OLED Dark Mode). Lives on body[data-theme="dark"], not :root[data-theme="dark"] — the theme is only known from the logged-in user's saved preference, not before the page renders, and custom properties still inherit from down to every descendant just like they would from :root. Every alias below (--color-primary-dark, --color-text-main, etc.) has to be redeclared here, not just pointed at its target once in :root: a custom property's value is computed once, at the element it's declared on. --color-text-main: var(--color-text-primary) in :root resolves using :root's own (light) --color-text-primary and then inherits that already-resolved value down — it never re-reads the overridden dark value below unless redeclared on this same selector. Forgetting this is what let --color-text-main stay frozen in its light-mode color under dark theme for a while; don't reintroduce that by adding a new alias only in :root. -------------------------------------------------------------------------- */ body[data-theme="dark"] { --color-primary: #818cf8; --color-primary-strong: #a5b4fc; --color-primary-soft-bg: #1e1b4b; --color-primary-soft-text: #c7d2fe; --color-primary-border: #3730a3; --color-primary-dark: var(--color-primary-strong); --color-primary-hover: var(--color-primary-strong); /* Pitch Black Surfaces */ --color-surface-muted: #000000; /* Pure black base canvas */ --color-surface: #0d0d0d; /* Elevated card/container surface */ --color-surface-hover: #1a1a1a; /* Hover states for interactive surfaces */ --color-background: var(--color-surface-muted); /* High-Contrast Pitch Black Borders */ --color-border: #262626; --color-border-strong: #404040; --border-color: var(--color-border); /* High-Legibility Neutral Text */ --color-text-primary: #f5f5f5; --color-text-secondary: #a3a3a3; --color-text-muted: #737373; --color-text-main: var(--color-text-primary); /* Pitch Black Semantic Status Colors */ --color-danger: #f87171; --color-danger-strong: #fca5a5; --color-danger-bg: #2c0b0e; --color-success: #4ade80; --color-success-strong: #86efac; --color-success-bg: #052e16; --color-warning: #fbbf24; --color-warning-strong: #fcd34d; --color-warning-bg: #2d1a00; /* Subtle rim-light style shadows for true black contrast */ --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.03); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); }