/* theme.css — MarkIt design tokens. Light + dark; js/prefs.js stamps [data-theme] on (it wins over the OS preference). Accent = green (MarkIt's mark). The token set mirrors LinkIt's proven system, adapted. Legacy skeleton names (--text/--muted/--border/--radius/--font) are kept as ALIASES so any code that referenced them still resolves. */ :root { /* Surfaces / ink */ --bg: #f5f7f6; --surface: #ffffff; --surface-2: #eef2f0; --surface-3: #e4e9e7; --ink: #161a18; --ink-soft: #58635e; --ink-faint: #8a938e; --line: #e2e8e5; --line-soft: #eef2f0; /* Accent (green) + status. --accent may be overridden at runtime by prefs.js. */ --accent: #2f9e6b; --accent-2: #38b57c; --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface)); --accent-ink: #ffffff; --ok: #1f9d63; --warn: #c07d10; --danger: #d64545; /* Spacing (4px grid) + radii + shadows */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px; --r-lg: 16px; --r-md: 11px; --r-sm: 7px; --shadow-1: 0 1px 2px rgba(16,24,20,.06), 0 2px 8px rgba(16,24,20,.05); --shadow-2: 0 4px 16px rgba(16,24,20,.10); --shadow-lg: 0 12px 40px rgba(16,24,20,.16); --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-num: "SF Mono", ui-monospace, "Segoe UI", system-ui, monospace; /* Legacy aliases (skeleton token names). */ --text: var(--ink); --muted: var(--ink-soft); --border: var(--line); --radius: var(--r-md); } :root[data-theme="dark"] { --bg: #0e120f; --surface: #161b18; --surface-2: #1d231f; --surface-3: #262e29; --ink: #eaf0ec; --ink-soft: #a2ada7; --ink-faint: #6c7772; --line: #29322d; --line-soft: #212823; --accent: #38b57c; --accent-2: #4cc98f; --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface)); --accent-ink: #06110b; --ok: #3cc887; --warn: #eab040; --danger: #e86a6a; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-2: 0 4px 18px rgba(0,0,0,.5); --shadow-lg: 0 14px 44px rgba(0,0,0,.55); } /* Pre-boot fallback (before prefs.js runs) so a dark-OS user doesn't flash white. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0e120f; --surface: #161b18; --surface-2: #1d231f; --surface-3: #262e29; --ink: #eaf0ec; --ink-soft: #a2ada7; --ink-faint: #6c7772; --line: #29322d; --accent: #38b57c; --accent-2: #4cc98f; --accent-ink: #06110b; } }