/* ========================================================================= NovaReps "Premium" theme — infrastructure-platform look Opt in per page with frontmatter `theme: premium` (see templates/layouts/layout.php). Full rationale, the token table and the override map: docs/design-system/premium-theme.md HOW THIS FILE WORKS (read before editing — this is the non-obvious part) • Loaded AFTER themes/main.css, and everything is scoped under `.theme-premium`, so pages without `theme: premium` are byte-for-byte unaffected. main.css stays the token authority for the default theme; this file only re-points tokens and re-skins components. • Tailwind v4 emits its utilities inside `@layer utilities`. Unlayered CSS (this file, main.css, custom.css) always beats layered CSS regardless of specificity or source order, so a plain `.theme-premium .rounded-3xl { … }` reliably overrides the Tailwind class — no !important needed. That is what lets us re-skin the hand-rolled-Tailwind sections without editing them. • Design rules: near-black ink + white + neutral grays; ONE accent (the existing NovaReps brown, kept for CTAs / links / highlights); 1px borders instead of shadows; radii 6–12px; no glows, blobs, glass or gradients; editorial grids (`.ed-grid`) instead of card soup. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Tokens — re-point the same variables main.css defines ------------------------------------------------------------------------- */ .theme-premium { /* Brand: existing NovaReps amber-brown, taken from its deeper end (amber-700/800). #B45309 is 5.0:1 on white, so it is safe for text links as well as CTA fills. */ --primary: #B45309; --primary-hover: #92400E; --accent: #FAF3EC; /* Flatten every gold gradient token wherever it is still read */ /* Brand gradient (headline accent text, featured badges). The button/CTA fills stay flat. */ --gradient-hero-from: #92400E; --gradient-hero-via: #D97706; --gradient-hero-to: #E8893B; --glow-color-1: transparent; --glow-color-2: transparent; /* Neutral ramp (pure neutrals — no blue-tinted slate) */ --bg-body: #ffffff; --bg-alternate: #fafafa; --bg-surface: #ffffff; --bg-quote: #fafafa; --text-main: #0a0a0a; --text-muted: #525252; --text-light: #737373; --border-color: #e5e5e5; /* !! Tailwind mirror tokens. Tailwind v4 compiles `--color-body: var(--bg-body)` etc. onto :root, and a custom property that references another one resolves at the element that declares it — i.e. at , BEFORE this .theme-premium class exists. Without re-declaring the mirrors here, every Tailwind colour class (bg-body, text-main, text-primary, border-theme…) silently keeps the default theme's colours while plain `var(--primary)` rules change. (main.css's .theme-dark block does the same for the same reason.) Keep this list in sync with @theme in public/assets/css/input.css. */ --color-primary: var(--primary); --color-primary-hover: var(--primary-hover); --color-accent: var(--accent); --color-gradient-from: var(--gradient-hero-from); --color-gradient-via: var(--gradient-hero-via); --color-gradient-to: var(--gradient-hero-to); --color-glow-1: var(--glow-color-1); --color-glow-2: var(--glow-color-2); --color-body: var(--bg-body); --color-alternate: var(--bg-alternate); --color-surface: var(--bg-surface); --color-main: var(--text-main); --color-muted: var(--text-muted); --color-light: var(--text-light); --color-theme: var(--border-color); /* Component tokens read by main.css / custom.css / section