/* ========================================================= NTPM Field Manual — design tokens - Light is the default. - Dark applies via prefers-color-scheme (when no manual override), OR when the user explicitly selects [data-theme="dark"]. - User-forced [data-theme="light"] always wins, even on dark systems. ========================================================= */ :root { /* ---- Surfaces (light) ---- */ --bone: #ECE5D3; --bone-warm: #E2D9C3; --paper: #FBF7EA; --surface-1: #FFFFFF; /* ---- Ink (light) ---- */ --ink: #181410; --ink-soft: rgba(24, 20, 16, 0.66); --ink-faint: rgba(24, 20, 16, 0.42); /* ---- Hairlines (light) ---- */ --mist: #D6CFBC; --mist-deep: #A89F8A; --rule: rgba(24, 20, 16, 0.12); --rule-strong: rgba(24, 20, 16, 0.28); /* ---- Brand (constant across themes, with light-tuned accents) ---- */ --forest: #0F3D2E; --forest-deep: #06251B; --leaf: #2E7D52; --leaf-soft: #C9DCC9; --amber: #D89834; --amber-deep: #9F6B1E; --alert: #B53A2B; /* ---- Type ---- */ --font-display: 'Fraunces', 'Times New Roman', serif; --font-body: 'Public Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* ---- Layout scale ---- */ --sidebar-w: 240px; --content-max: 860px; /* prose / form pages */ --content-wide: 1180px; /* lists, dashboards, multi-column */ --gutter: 22px; --gutter-lg: 36px; color-scheme: light dark; } /* ========================================================= Dark theme — applied two ways: 1. Explicit user choice via [data-theme="dark"] on 2. System preference, when no explicit theme is set ========================================================= */ [data-theme="dark"] { --bone: #080808; --bone-warm: #121210; --paper: #101010; --surface-1: #232220; --ink: #E8E6E0; --ink-soft: rgba(232, 230, 224, 0.70); --ink-faint: rgba(232, 230, 224, 0.44); --mist: #2A2A28; --mist-deep: #6A6A66; --rule: rgba(232, 230, 224, 0.09); --rule-strong: rgba(232, 230, 224, 0.22); --forest: #6FBE92; --forest-deep: #4FA577; --leaf: #8FD0AB; --leaf-soft: #1F3A2C; --amber: #E0A648; --amber-deep: #B07820; --alert: #E55F4F; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bone: #080808; --bone-warm: #121210; --paper: #101010; --surface-1: #232220; --ink: #E8E6E0; --ink-soft: rgba(232, 230, 224, 0.70); --ink-faint: rgba(232, 230, 224, 0.44); --mist: #2A2A28; --mist-deep: #6A6A66; --rule: rgba(232, 230, 224, 0.09); --rule-strong: rgba(232, 230, 224, 0.22); --forest: #6FBE92; --forest-deep: #4FA577; --leaf: #8FD0AB; --leaf-soft: #1F3A2C; --amber: #E0A648; --amber-deep: #B07820; --alert: #E55F4F; } }