/* ========================================================================= 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; --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); }