/* ========================================================================= MAESTROX — Design Tokens The single source of truth for color, type, spacing, and elevation. Three color palettes are defined as themes; switch via data-palette on . ========================================================================= */ /* ---------- Type ---------- */ @font-face { font-family: 'Cormorant'; src: url('../fonts/Cormorant-Light.otf') format('opentype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Cormorant'; src: url('../fonts/Cormorant-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Cormorant'; src: url('../fonts/Cormorant-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Cormorant'; src: url('../fonts/Cormorant-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Cormorant'; src: url('../fonts/Cormorant-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Cormorant'; src: url('../fonts/Cormorant-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Cormorant'; src: url('../fonts/Cormorant-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Josefin Sans'; src: url('../fonts/JosefinSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Josefin Sans'; src: url('../fonts/JosefinSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Josefin Sans'; src: url('../fonts/JosefinSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } :root { /* ====== TYPE TOKENS ====== */ --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, serif; --font-body: 'Josefin Sans', system-ui, -apple-system, sans-serif; /* Text-grade reading face: message prose, long-form copy, dense table cells. Do NOT globally swap --font-body to this — labels/titles keep Josefin. */ --font-ui: 'Work Sans', 'Josefin Sans', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale — modular. Body is 14px (down from prior 15-16, denser). */ --fs-display-xl: 44px; /* hero page titles, dashboards */ --fs-display-lg: 32px; /* secondary section titles */ --fs-display-md: 24px; /* list page titles */ --fs-display-sm: 18px; /* cards, modals */ --fs-eyebrow: 10px; /* uppercase Josefin labels above titles */ --fs-body: 14px; /* default body */ --fs-body-sm: 12.5px; /* dense rows, table cells */ --fs-meta: 11px; /* timestamps, secondary meta */ --fs-mono: 11.5px; /* slugs, ISBNs, technical data */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.55; --lh-loose: 1.7; --tracking-tight: -0.005em; --tracking-base: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; /* labels */ --tracking-widest: 0.36em; /* eyebrows */ /* ====== SPACING ====== */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ====== RADIUS ====== */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px; /* ====== SHADOWS ====== */ --shadow-1: 0 1px 2px rgba(8, 6, 4, 0.04), 0 1px 3px rgba(8, 6, 4, 0.06); --shadow-2: 0 4px 12px rgba(8, 6, 4, 0.06), 0 2px 6px rgba(8, 6, 4, 0.04); --shadow-3: 0 12px 32px rgba(8, 6, 4, 0.10), 0 4px 12px rgba(8, 6, 4, 0.06); --shadow-inset: inset 0 0 0 1px var(--border); /* ====== MOTION ====== */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ====== LAYOUT ====== */ --sidebar-w: 232px; --sidebar-w-collapsed: 64px; --content-max: 1240px; --gutter: var(--s-8); } /* ========================================================================= PALETTE A — REFINED CURRENT (default) Black sidebar, warm cream content, gold reserved for brand moments, plus a real functional color system (info / success / warning / danger). ========================================================================= */ :root, [data-palette="A"] { /* Surfaces */ --bg-app: #0a0805; --bg-sidebar: #0a0805; --bg-content: #f6efe3; /* warmer than current near-white */ --bg-surface: #ffffff; /* cards, inputs */ --bg-surface-2: #f1e8d6; /* table row stripes, subtle wells */ --bg-elevated: #ffffff; --bg-overlay: rgba(10, 8, 5, 0.75); /* Text */ --fg-1: #1a1410; /* default body on cream */ --fg-2: #4a4138; /* secondary */ --fg-3: #7c7264; /* meta, captions */ --fg-4: #a89e8c; /* placeholder, disabled */ --fg-on-dark: #f3ead4; /* sidebar, dark surfaces */ --fg-on-dark-2: #a89878; --fg-on-dark-3: #6b5d44; --fg-on-gold: #1a1410; /* Borders */ --border: #e6dcc5; --border-strong: #c8b894; --border-dark: rgba(200, 169, 94, 0.28); /* Brand accent — used SPARINGLY now */ --gold: #c8a95e; --gold-soft: rgba(200, 169, 94, 0.55); --gold-faint: rgba(200, 169, 94, 0.22); --gold-hover: #b89540; /* Functional state — new */ --info: #2a6fdb; --info-bg: #e8f0fc; --info-border: #b9d0f0; --success: #1f8a5b; --success-bg: #e3f3eb; --success-border:#a8d5bf; --warning: #c87a1a; --warning-bg: #fbf0dc; --warning-border:#e7c98a; --danger: #b8341c; --danger-bg: #fae8e3; --danger-border: #e8b8ad; --neutral: #6b5d44; --neutral-bg: #ebe1c9; --neutral-border:#d4c498; /* Focus ring */ --focus: #2a6fdb; --focus-ring: 0 0 0 3px rgba(42, 111, 219, 0.25); } /* ========================================================================= PALETTE B — PAPER & SEPIA Lighter than A. Content area is true paper warmth with subtle texture. Gold becomes sepia. Functional colors muted to match a "document" feel. ========================================================================= */ [data-palette="B"] { --bg-app: #0a0805; --bg-sidebar: #0e0a06; --bg-content: #f9f3e6; --bg-surface: #fffdf5; --bg-surface-2: #f3ebd5; --bg-elevated: #fffdf5; --bg-overlay: rgba(10, 8, 5, 0.7); --fg-1: #1f1a14; --fg-2: #524739; --fg-3: #85795f; --fg-4: #b4a587; --fg-on-dark: #f0e6cd; --fg-on-dark-2: #ad9d7d; --fg-on-dark-3: #6d5f43; --fg-on-gold: #1a1410; --border: #e8dec0; --border-strong: #c4b48a; --border-dark: rgba(196, 132, 76, 0.32); /* Sepia replaces gold */ --gold: #b8743a; --gold-soft: rgba(184, 116, 58, 0.5); --gold-faint: rgba(184, 116, 58, 0.18); --gold-hover: #9a5a25; --info: #3b6f95; --info-bg: #e8eff5; --info-border: #b8c8d8; --success: #4a7a44; --success-bg: #e7eee2; --success-border:#b4c8a8; --warning: #a86d1a; --warning-bg: #f5e6c8; --warning-border:#d8b870; --danger: #94381f; --danger-bg: #f0ddd4; --danger-border: #c89880; --neutral: #6b5d44; --neutral-bg: #ede4c8; --neutral-border:#c8b890; --focus: #3b6f95; --focus-ring: 0 0 0 3px rgba(59, 111, 149, 0.22); } /* ========================================================================= PALETTE C — GOLD + OXBLOOD Adds a second brand accent so gold can stay rare. Oxblood for primary actions, gold for moments of distinction. ========================================================================= */ [data-palette="C"] { --bg-app: #08060a; --bg-sidebar: #08060a; --bg-content: #f6efe3; --bg-surface: #ffffff; --bg-surface-2: #f1e8d6; --bg-elevated: #ffffff; --bg-overlay: rgba(8, 6, 10, 0.75); --fg-1: #1a1410; --fg-2: #4a4138; --fg-3: #7c7264; --fg-4: #a89e8c; --fg-on-dark: #f3ead4; --fg-on-dark-2: #a89878; --fg-on-dark-3: #6b5d44; --fg-on-gold: #1a1410; --border: #e6dcc5; --border-strong: #c8b894; --border-dark: rgba(200, 169, 94, 0.28); --gold: #c8a95e; --gold-soft: rgba(200, 169, 94, 0.55); --gold-faint: rgba(200, 169, 94, 0.22); --gold-hover: #b89540; /* Second accent — oxblood */ --accent: #7a1f24; --accent-soft: rgba(122, 31, 36, 0.55); --accent-faint: rgba(122, 31, 36, 0.12); --accent-hover: #5e1418; --info: #2a6fdb; --info-bg: #e8f0fc; --info-border: #b9d0f0; --success: #1f8a5b; --success-bg: #e3f3eb; --success-border:#a8d5bf; --warning: #c87a1a; --warning-bg: #fbf0dc; --warning-border:#e7c98a; --danger: #b8341c; --danger-bg: #fae8e3; --danger-border: #e8b8ad; --neutral: #6b5d44; --neutral-bg: #ebe1c9; --neutral-border:#d4c498; --focus: #7a1f24; --focus-ring: 0 0 0 3px rgba(122, 31, 36, 0.25); } /* Palette A doesn't have --accent — alias to gold so component code is uniform */ [data-palette="A"], [data-palette="B"] { --accent: var(--gold); --accent-soft: var(--gold-soft); --accent-faint: var(--gold-faint); --accent-hover: var(--gold-hover); } /* ───────────────────────────────────────────────────────────────────────── LEGACY TOKEN BRIDGE Most of the existing site references --mx2-gold / --mx2-paper / --cream-wash / etc. (defined in tokens.css). Those have hardcoded values that override any palette-specific overrides because tokens.css loads AFTER this file and its :root rule beats [data-palette="A"] on ties. Re-define them per palette using html[data-palette="..."] (specificity 0,0,1,1) to outrank the :root alias in tokens.css (0,0,1,0) and to repoint the legacy names at the new palette values. End result: every existing rule that uses --mx2-gold / --cream-wash / etc. picks up the palette automatically — no per-rule rewiring. ───────────────────────────────────────────────────────────────────────── */ html[data-palette="A"] { --mx2-gold: #c8a95e; --mx2-gold-mid: #d6bb78; --mx2-gold-deep: #b89540; --mx2-gold-light: #e8dec9; --mx2-paper: #f6efe3; --mx2-paper-2: #f1e8d6; --cream-wash: #f6efe3; --cream-lt: #f1e8d6; --rule: #e6dcc5; --rule-lt: #f0e8d6; } html[data-palette="B"] { --mx2-gold: #b8743a; --mx2-gold-mid: #c89968; --mx2-gold-deep: #9a5a25; --mx2-gold-light: #f0e6cd; --mx2-paper: #f9f3e6; --mx2-paper-2: #f3ebd5; --cream-wash: #f9f3e6; --cream-lt: #f3ebd5; --rule: #e8dec0; --rule-lt: #f1e8d0; } html[data-palette="C"] { --mx2-gold: #c8a95e; --mx2-gold-mid: #d6bb78; --mx2-gold-deep: #b89540; --mx2-gold-light: #e8dec9; --mx2-paper: #f6efe3; --mx2-paper-2: #f1e8d6; --cream-wash: #f6efe3; --cream-lt: #f1e8d6; --rule: #e6dcc5; --rule-lt: #f0e8d6; /* Palette C also wants oxblood for primary actions across the site, not just the new --accent token. Map legacy gold-using spots gradually if/when we identify which ones should flip. */ } /* ========================================================================= PALETTE W — CLEAN WHITE A genuinely light theme: white content area + neutral-gray borders, with the gold kept ONLY as a sparing brand accent (buttons, kickers). The dark sidebar is preserved. Answers "let users switch the gold background to white." Drew 2026-07-28. ========================================================================= */ [data-palette="W"] { /* Surfaces */ --bg-app: #0a0805; /* sidebar stays dark */ --bg-sidebar: #0a0805; --bg-content: #ffffff; /* WHITE content area */ --bg-surface: #ffffff; /* cards, inputs */ --bg-surface-2: #f5f5f7; /* table stripes, subtle wells */ --bg-elevated: #ffffff; --bg-overlay: rgba(15, 15, 20, 0.6); /* Text — dark ink on white */ --fg-1: #1a1a1e; --fg-2: #45454d; --fg-3: #70707a; --fg-4: #a0a0aa; --fg-on-dark: #f3ead4; /* sidebar text (unchanged) */ --fg-on-dark-2: #a89878; --fg-on-dark-3: #6b5d44; /* W's accent (--mx2-gold) is near-black, so on-accent text must be light — was #1a1410 (dark), which rendered gold-bg buttons black-on-black. */ --fg-on-gold: #ffffff; /* Borders — neutral gray */ --border: #e6e6ea; --border-strong: #cfcfd6; --border-dark: rgba(200, 169, 94, 0.28); /* Brand accent — gold kept, used sparingly */ --gold: #c8a95e; --gold-soft: rgba(200, 169, 94, 0.55); --gold-faint: rgba(200, 169, 94, 0.16); --gold-hover: #b89540; /* Functional state — same as A */ --info: #2a6fdb; --info-bg: #e8f0fc; --info-border: #b9d0f0; --success: #1f8a5b; --success-bg: #e3f3eb; --success-border: #a8d5bf; --warning: #c87a1a; --warning-bg: #fbf0dc; --warning-border: #e7c98a; --danger: #b8341c; --danger-bg: #fae8e3; --danger-border: #e8b8ad; --neutral: #6b6b74; --neutral-bg: #eeeef1; --neutral-border: #d4d4da; --focus: #2a6fdb; --focus-ring: 0 0 0 3px rgba(42, 111, 219, 0.25); } /* Legacy token bridge (outrank the :root aliases in tokens.css). */ html[data-palette="W"] { --mx2-gold: #c8a95e; --mx2-gold-mid: #d6bb78; --mx2-gold-deep: #b89540; --mx2-gold-light: #efe9dc; --mx2-paper: #ffffff; --mx2-paper-2: #f5f5f7; --cream-wash: #ffffff; --cream-lt: #f5f5f7; --rule: #e6e6ea; --rule-lt: #f0f0f2; } /* ========================================================================= BOLD PALETTES (v2) — Drew 2026-07-28. Four genuinely distinct themes that SUPERSEDE the subtle cream variants above (later in file → win on ties). A = Renaissance (gold/cream · default) W = White (white + black) B = Blue (cool / navy) C = Gray (slate) Sidebar + canvas backdrops are set in maestrox-canvas.css. ========================================================================= */ /* ── A · RENAISSANCE ─────────────────────────────────────────────────── */ [data-palette="A"] { --bg-content:#f3ead5; --bg-surface:#fbf6ec; --bg-surface-2:#efe4cd; --bg-app:#17110a; --bg-sidebar:#17110a; --fg-1:#2a1f12; --fg-2:#5a4a30; --fg-3:#857552; --fg-4:#a89a78; --border:#e2d3af; --border-strong:#cbb98d; --gold:#b8944a; --gold-hover:#9a7a38; --gold-soft:rgba(184,148,74,.55); --gold-faint:rgba(184,148,74,.18); --danger:#7a1f24; --danger-bg:#f5e3e0; --danger-border:#e0b8b2; } html[data-palette="A"] { --mx2-gold:#b8944a; --mx2-gold-mid:#c9a765; --mx2-gold-deep:#9a7a38; --mx2-gold-light:#e8dbbf; --mx2-paper:#f3ead5; --mx2-paper-2:#efe4cd; --cream-wash:#f3ead5; --cream-lt:#efe4cd; --rule:#e2d3af; --rule-lt:#eaddc0; } /* ── W · WHITE (white + black) ───────────────────────────────────────── */ [data-palette="W"] { --bg-content:#ffffff; --bg-surface:#ffffff; --bg-surface-2:#f4f4f5; --bg-app:#0a0a0a; --bg-sidebar:#0a0a0a; --fg-1:#111111; --fg-2:#444444; --fg-3:#767676; --fg-4:#a3a3a3; --border:#e5e5e5; --border-strong:#d4d4d4; --gold:#111111; --gold-hover:#000000; --gold-soft:rgba(0,0,0,.5); --gold-faint:rgba(0,0,0,.06); --focus:#111111; --focus-ring:0 0 0 3px rgba(0,0,0,.18); } html[data-palette="W"] { --mx2-gold:#111111; --mx2-gold-mid:#333333; --mx2-gold-deep:#000000; --mx2-gold-light:#e8e8e8; --mx2-paper:#ffffff; --mx2-paper-2:#f4f4f5; --cream-wash:#ffffff; --cream-lt:#f4f4f5; --rule:#e5e5e5; --rule-lt:#efefef; } /* ── B · BLUE ────────────────────────────────────────────────────────── */ [data-palette="B"] { --bg-content:#eef3fb; --bg-surface:#ffffff; --bg-surface-2:#e4edf9; --bg-app:#0f2036; --bg-sidebar:#0f2036; --fg-1:#0f2540; --fg-2:#33507a; --fg-3:#64748b; --fg-4:#94a3b8; --border:#d4e0f0; --border-strong:#b8cae4; --gold:#2563eb; --gold-hover:#1d4ed8; --gold-soft:rgba(37,99,235,.5); --gold-faint:rgba(37,99,235,.12); --focus:#2563eb; --focus-ring:0 0 0 3px rgba(37,99,235,.25); } html[data-palette="B"] { --mx2-gold:#2563eb; --mx2-gold-mid:#4f80e8; --mx2-gold-deep:#1d4ed8; --mx2-gold-light:#dbe7fb; --mx2-paper:#eef3fb; --mx2-paper-2:#e4edf9; --cream-wash:#eef3fb; --cream-lt:#e4edf9; --rule:#d4e0f0; --rule-lt:#e4edf9; } /* ── C · GRAY (slate) ────────────────────────────────────────────────── */ [data-palette="C"] { --bg-content:#edeef1; --bg-surface:#ffffff; --bg-surface-2:#e6e8ec; --bg-app:#1e232b; --bg-sidebar:#1e232b; --fg-1:#1f2328; --fg-2:#4b5563; --fg-3:#6b7280; --fg-4:#9ca3af; --border:#d9dce1; --border-strong:#c3c8d0; --gold:#334155; --gold-hover:#1e293b; --gold-soft:rgba(51,65,85,.5); --gold-faint:rgba(51,65,85,.1); --focus:#334155; --focus-ring:0 0 0 3px rgba(51,65,85,.22); } html[data-palette="C"] { --mx2-gold:#334155; --mx2-gold-mid:#475569; --mx2-gold-deep:#1e293b; --mx2-gold-light:#dfe3e8; --mx2-paper:#edeef1; --mx2-paper-2:#e6e8ec; --cream-wash:#edeef1; --cream-lt:#e6e8ec; --rule:#d9dce1; --rule-lt:#e5e7eb; }