/* Shared design tokens — single source of truth for color/typography across the app and the theme. Plugin-owned (the app needs it in wp-admin too); the theme enqueues the same file for site pages. Load BEFORE any page-specific stylesheet. From design_handoff_watchlist-02. Pages default to light. Dark mode: `` — midnight is the shipping variant; the other three dark variants are retained design alternates. Typography: system font stack — no external font requests. */ :root { --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } :root, [data-theme="light"] { --bg: #f6f3ee; /* warm off-white */ --surface: #ffffff; --surface-2: #fbf8f2; --ink: #1c1917; --ink-2: #44403c; --ink-3: #78716c; --line: #e8e2d6; --line-2: #efeae0; --accent: #2f5d8a; --accent-ink: #ffffff; --tag-bg: #f0ebdf; --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-md: 0 8px 24px -8px rgba(28, 25, 23, 0.12), 0 2px 6px rgba(28, 25, 23, 0.06); --radius: 10px; --radius-sm: 6px; } [data-theme="dark"] { --bg: #18150f; --surface: #221d16; --surface-2: #2a241b; --ink: #f3efe6; --ink-2: #cbc3b4; --ink-3: #9c937f; --line: #3a3327; --line-2: #2f291f; --accent: #6bb583; --accent-ink: #12200f; --tag-bg: #2f291f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 12px 32px -10px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); --radius: 10px; --radius-sm: 6px; } /* ---------- dark mode variants ---------- The base [data-theme="dark"] block above is "Charcoal", the default. Set `` alongside data-theme="dark" to swap in an alternate palette. All variants keep the same warm/brand accent hue family, just adjust background depth and surface/text contrast. */ /* Dim — softer, more neutral, less contrast drop than Charcoal. Good for dense, text-heavy screens (the dashboard) where low contrast reads as murky. */ [data-theme="dark"][data-dark-variant="dim"] { --bg: #211f1b; --surface: #2a2823; --surface-2: #322f28; --ink: #f2eee5; --ink-2: #d1cabb; --ink-3: #a89f8d; --line: #423d33; --line-2: #38332a; --accent: #7dc297; --accent-ink: #10200f; --tag-bg: #383329; } /* Midnight — deep, cool, blue-black. Higher surface/bg separation. */ [data-theme="dark"][data-dark-variant="midnight"] { --bg: #12151a; --surface: #1b2029; --surface-2: #222833; --ink: #eef1f6; --ink-2: #c6ccd6; --ink-3: #929aa8; --line: #303947; --line-2: #2a323e; --accent: #6fa8d9; --accent-ink: #0b1622; --tag-bg: #222b38; } /* Slate — neutral cool gray, crisp separation, highest-contrast option. */ [data-theme="dark"][data-dark-variant="slate"] { --bg: #17181a; --surface: #212327; --surface-2: #292b30; --ink: #f4f5f6; --ink-2: #cdd0d5; --ink-3: #9a9ea6; --line: #37393f; --line-2: #2d2f35; --accent: #5fbf8b; --accent-ink: #0d1a12; --tag-bg: #2c2f36; }