/* ============================================================================ Platform — design tokens (mockup only) White-label principle: the brand is expressed through ONE accent variable (--accent) plus a neutral surface set. Swapping a theme class on (or just changing --accent) re-skins every screen — this is the hook the admin "Branding" section will drive later, with no redeploy. ============================================================================ */ :root { /* spacing / shape — shared across all themes */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: "Georgia", "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; /* default = slate theme, so a bare page still renders correctly */ --font-ui: var(--font-sans); --font-display: var(--font-sans); /* headings/titles — sans in Slate, serif in Editorial */ --bg: #f4f4f5; --surface: #ffffff; --surface-2: #fafafa; --text: #18181b; --text-muted: #71717a; --text-faint: #a1a1aa; --border: #e4e4e7; --accent: #0d9488; /* teal-600 — deliberately NOT the old violet */ --accent-hover: #0f766e; --accent-contrast: #ffffff; --accent-soft: #f0fdfa; --shadow-card: 0 1px 2px rgba(24,24,27,.04), 0 8px 24px rgba(24,24,27,.06); } /* ---- Theme A — Slate neutral + single accent ---------------------------- */ .theme-slate { --font-ui: var(--font-sans); --font-display: var(--font-sans); --bg: #f4f4f5; --surface: #ffffff; --surface-2: #fafafa; --text: #18181b; --text-muted: #71717a; --text-faint: #a1a1aa; --border: #e4e4e7; --accent: #0d9488; --accent-hover: #0f766e; --accent-contrast: #ffffff; --accent-soft: #f0fdfa; --shadow-card: 0 1px 2px rgba(24,24,27,.04), 0 8px 24px rgba(24,24,27,.06); } /* ---- Theme B — Warm editorial ------------------------------------------- */ .theme-editorial { --font-ui: var(--font-serif); --font-display: var(--font-serif); --bg: #f7f4ee; --surface: #fffdf8; --surface-2: #f2ede3; --text: #1c1b19; --text-muted: #6b6459; --text-faint: #9a9184; --border: #e6dfd2; --accent: #b0503c; /* muted terracotta */ --accent-hover: #96412f; --accent-contrast: #fffdf8; --accent-soft: #f3e9e2; --shadow-card: 0 1px 2px rgba(28,27,25,.04), 0 12px 30px rgba(28,27,25,.07); } /* ---- Theme C — Dark-first ----------------------------------------------- */ .theme-dark { --font-ui: var(--font-sans); --font-display: var(--font-sans); --bg: #09090b; --surface: #18181b; --surface-2: #111113; --text: #fafafa; --text-muted: #a1a1aa; --text-faint: #71717a; --border: #27272a; --accent: #22d3ee; /* cyan */ --accent-hover: #67e8f9; --accent-contrast: #06181c; --accent-soft: rgba(34,211,238,.10); --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.55); } /* ---- Shared primitives used by the login mockups ------------------------ */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); color: var(--text); background: var(--bg); } .field-label { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text-muted); margin-bottom: 7px; } .btn-accent { font-family: var(--font-sans); font-weight: 600; color: var(--accent-contrast); background: var(--accent); border: none; cursor: pointer; transition: background .16s ease, transform .12s ease, box-shadow .16s ease; } .btn-accent:hover { background: var(--accent-hover); } .btn-accent:active { transform: translateY(1px); } .link-accent { color: var(--accent); text-decoration: none; font-family: var(--font-sans); } .link-accent:hover { text-decoration: underline; } .logo-mark { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 800; color: var(--accent-contrast); background: var(--accent); }