/* Color scheme presets — semantic token overrides via data-color-scheme on . */ /* brand-light (default) */ :root, :root[data-color-scheme="brand-light"] { color-scheme: light; --tm-color-text: var(--p-surface-900); --tm-color-text-muted: var(--p-surface-500); --tm-color-bg: var(--p-surface-50); --tm-color-surface: var(--p-surface-0); --tm-color-surface-2: var(--p-surface-100); --tm-color-border: var(--p-surface-200); --tm-color-primary: var(--p-primary-600); --tm-color-primary-hover: var(--p-primary-700); --tm-color-accent: var(--tm-accent-500); --tm-color-link: var(--p-primary-700); --tm-color-link-hover: var(--p-primary-800); --tm-shadow-sm: 0 1px 2px rgba(16, 33, 43, 0.08); --tm-shadow-md: 0 10px 28px rgba(16, 33, 43, 0.1); --tm-header-bg: rgba(255, 255, 255, 0.85); } :root[data-color-scheme="brand-dark"] { color-scheme: dark; --tm-color-text: var(--p-surface-100); --tm-color-text-muted: var(--p-surface-400); --tm-color-bg: var(--tm-canvas-dark); --tm-color-surface: var(--p-surface-800); --tm-color-surface-2: var(--p-surface-700); --tm-color-border: var(--p-surface-700); --tm-color-primary: var(--p-primary-400); --tm-color-primary-hover: var(--p-primary-300); --tm-color-accent: var(--tm-accent-400); --tm-color-link: var(--p-primary-300); --tm-color-link-hover: var(--p-primary-200); --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --tm-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5); --tm-header-bg: rgba(13, 28, 38, 0.85); } :root[data-color-scheme="solarized-light"] { color-scheme: light; --tm-color-text: #657b83; --tm-color-text-muted: #93a1a1; --tm-color-bg: #fdf6e3; --tm-color-surface: #eee8d5; --tm-color-surface-2: #e4ddc8; --tm-color-border: #d3cbb8; --tm-color-primary: #2aa198; --tm-color-primary-hover: #238f87; --tm-color-accent: #b58900; --tm-color-link: #268bd2; --tm-color-link-hover: #1e6fa8; --tm-shadow-sm: 0 1px 2px rgba(0, 43, 54, 0.1); --tm-shadow-md: 0 10px 28px rgba(0, 43, 54, 0.12); --tm-header-bg: rgba(253, 246, 227, 0.9); } :root[data-color-scheme="paper-light"] { color-scheme: light; --tm-color-text: #3d3a36; --tm-color-text-muted: #7a756c; --tm-color-bg: #faf9f7; --tm-color-surface: #ffffff; --tm-color-surface-2: #f3f1ed; --tm-color-border: #e5e2dc; --tm-color-primary: #5c6bc0; --tm-color-primary-hover: #4a58a8; --tm-color-accent: #c9a227; --tm-color-link: #5c6bc0; --tm-color-link-hover: #4a58a8; --tm-shadow-sm: 0 1px 2px rgba(61, 58, 54, 0.08); --tm-shadow-md: 0 10px 28px rgba(61, 58, 54, 0.1); --tm-header-bg: rgba(250, 249, 247, 0.9); } :root[data-color-scheme="solarized-dark"] { color-scheme: dark; --tm-color-text: #839496; --tm-color-text-muted: #657b83; --tm-color-bg: #002b36; --tm-color-surface: #073642; --tm-color-surface-2: #0a3d4a; --tm-color-border: #0f4a58; --tm-color-primary: #2aa198; --tm-color-primary-hover: #3bb8af; --tm-color-accent: #b58900; --tm-color-link: #268bd2; --tm-color-link-hover: #4aa3e0; --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --tm-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5); --tm-header-bg: rgba(0, 43, 54, 0.9); } :root[data-color-scheme="nord-dark"] { color-scheme: dark; --tm-color-text: #eceff4; --tm-color-text-muted: #d8dee9; --tm-color-bg: #2e3440; --tm-color-surface: #3b4252; --tm-color-surface-2: #434c5e; --tm-color-border: #4c566a; --tm-color-primary: #88c0d0; --tm-color-primary-hover: #9cd0de; --tm-color-accent: #ebcb8b; --tm-color-link: #81a1c1; --tm-color-link-hover: #9ab0d0; --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --tm-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5); --tm-header-bg: rgba(46, 52, 64, 0.9); } :root[data-color-scheme="dracula-dark"] { color-scheme: dark; --tm-color-text: #f8f8f2; --tm-color-text-muted: #bd93f9; --tm-color-bg: #282a36; --tm-color-surface: #44475a; --tm-color-surface-2: #4d5066; --tm-color-border: #6272a4; --tm-color-primary: #bd93f9; --tm-color-primary-hover: #d0acf8; --tm-color-accent: #ff79c6; --tm-color-link: #8be9fd; --tm-color-link-hover: #aaf0ff; --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --tm-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.55); --tm-header-bg: rgba(40, 42, 54, 0.9); } /* No-JS fallback: system preference → brand preset */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme]) { color-scheme: dark; --tm-color-text: var(--p-surface-100); --tm-color-text-muted: var(--p-surface-400); --tm-color-bg: var(--tm-canvas-dark); --tm-color-surface: var(--p-surface-800); --tm-color-surface-2: var(--p-surface-700); --tm-color-border: var(--p-surface-700); --tm-color-primary: var(--p-primary-400); --tm-color-primary-hover: var(--p-primary-300); --tm-color-accent: var(--tm-accent-400); --tm-color-link: var(--p-primary-300); --tm-color-link-hover: var(--p-primary-200); --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --tm-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5); --tm-header-bg: rgba(13, 28, 38, 0.85); } }