/* ============================================================ BRAND TOKENS Single source of truth for color, typography, and surface tokens across the marketing site and all app subdomains (tid.*, etc.). How to use in a new subdomain: 1. Drop this file into the project (e.g. assets/css/brand.css). 2. BEFORE your own stylesheet, so your app can reference these tokens. 3. In your CSS use the SEMANTIC tokens (--bg, --text, --accent, ...), NOT the raw tokens (--alabaster, --obsidian, ...). The semantic tokens auto-flip when the theme switches. 4. Default theme is light. To opt an app into dark-by-default: To respect the user's OS preference: do nothing — the prefers-color-scheme block below handles it. ============================================================ */ /* ---------- Font --------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); /* ---------- Raw brand tokens (NEVER change per theme) -------- */ :root { /* Core palette */ --alabaster: #F9F7F2; --alabaster-dim: #E8E4DC; /* a step darker — borders on light bg */ --obsidian: #1A1A1A; --obsidian-soft: #2C2C2C; /* one step lighter — elevated dark surface */ --obsidian-softer: #3A3733; /* two steps lighter — hover/dividers on dark */ --bronze: #AD8B55; --bronze-hover: #967642; --bronze-light-10: rgba(173, 139, 85, 0.10); /* tint background */ --bronze-light-20: rgba(173, 139, 85, 0.20); --grey-warm: #E8E4DC; --grey-mid: #6B6B6B; --grey-soft: #A8A299; /* muted text on dark */ /* Status colors (warm-toned to harmonize with bronze) */ --status-success: #5A7D55; /* sage */ --status-warning: #D89B3C; /* amber, distinct from bronze */ --status-error: #B91C1C; /* brick */ /* Typography */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Radii / shadow */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06); --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.10); --shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.18); } /* ---------- Light theme (default — matches the marketing site) -- */ :root, :root[data-theme="light"] { --bg: var(--alabaster); --surface: #FFFFFF; --surface-elevated: var(--alabaster); --border: var(--alabaster-dim); --border-strong: #D6D1C5; --text: var(--obsidian); --text-muted: var(--grey-mid); --text-on-accent: var(--alabaster); --accent: var(--bronze); --accent-hover: var(--bronze-hover); --accent-tint: var(--bronze-light-10); --accent-tint-strong: var(--bronze-light-20); --overlay: rgba(26, 26, 26, 0.55); } /* ---------- Dark theme (obsidian-dominant) ------------------- */ :root[data-theme="dark"] { --bg: var(--obsidian); --surface: var(--obsidian-soft); --surface-elevated: var(--obsidian-softer); --border: rgba(249, 247, 242, 0.08); --border-strong: rgba(249, 247, 242, 0.16); --text: var(--alabaster); --text-muted: var(--grey-soft); --text-on-accent: var(--obsidian); --accent: var(--bronze); --accent-hover: #C29D63; /* lighter bronze, better on dark */ --accent-tint: var(--bronze-light-10); --accent-tint-strong: var(--bronze-light-20); --overlay: rgba(0, 0, 0, 0.65); } /* ---------- Auto dark when user OS prefers it (no override) -- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--obsidian); --surface: var(--obsidian-soft); --surface-elevated: var(--obsidian-softer); --border: rgba(249, 247, 242, 0.08); --border-strong: rgba(249, 247, 242, 0.16); --text: var(--alabaster); --text-muted: var(--grey-soft); --text-on-accent: var(--obsidian); --accent: var(--bronze); --accent-hover: #C29D63; --overlay: rgba(0, 0, 0, 0.65); } } /* ---------- Base typography & smoothing ---------------------- */ html { font-family: var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); }