/* ───────────────────────────────────────────────────────────────────────── Mavek Design Tokens — v2.0 Palette: Parchment · Night Ink · Gold Ramp Type: Instrument Sans · Cormorant Garamond · JetBrains Mono Theming contract: - BRAND tokens (gold, ink, parchment) are immutable across themes. - SEMANTIC tokens (--color-bg, --color-text, --color-surface, etc.) are redefined under [data-theme="dark"] so a single attribute on flips the whole UI. - Components MUST consume semantic tokens, never raw brand colors. ───────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand Palette (immutable) ─────────────────────────────────────── */ --parchment: #F6F3E8; --parchment-2: #EDEADF; --ink: #1A1A18; --ink-2: #2A2926; --ink-soft: #4A4840; --ink-muted: #8A8878; --gold-bright: #E8C95A; --gold-mid: #C9A84C; --gold-dark: #8A7028; --gold-deep: #4A3D1C; --night: #0A0A08; --night-2: #14140F; /* ── Semantic Colors (light mode default) ──────────────────────────── */ --color-primary: var(--gold-mid); --color-primary-hover: var(--gold-dark); --color-primary-light: rgba(201, 168, 76, 0.15); --color-primary-on: var(--night); /* text on primary surface */ --color-success: #4A7C59; --color-success-bg: rgba(74, 124, 89, 0.10); --color-warning: #B8860B; --color-warning-bg: rgba(184, 134, 11, 0.10); --color-danger: #A63D2F; --color-danger-bg: rgba(166, 61, 47, 0.08); --color-info: #2E6188; --color-info-bg: rgba(46, 97, 136, 0.08); /* Surfaces */ --color-bg: var(--parchment); --color-bg-elevated: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: var(--parchment-2); /* sunken / muted card */ --color-surface-hover: rgba(26, 26, 24, 0.04); --color-overlay: rgba(10, 10, 8, 0.55); /* modal scrim */ /* Borders */ --color-border: rgba(26, 26, 24, 0.14); --color-border-light: rgba(26, 26, 24, 0.07); --color-border-strong: rgba(26, 26, 24, 0.30); --color-border-focus: var(--gold-mid); /* Text */ --color-text: var(--ink); --color-text-muted: var(--ink-soft); --color-text-light: #6B6A60; /* AA-passing on parchment (was #8A8878 ≈ 3.4:1) */ --color-text-disabled: rgba(26, 26, 24, 0.40); --color-text-inverted: var(--parchment); /* on dark surfaces */ --color-link: var(--gold-dark); --color-link-hover: var(--gold-deep); /* ── Sidebar (always dark, even in light mode) ─────────────────────── */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --sidebar-bg: var(--night); --sidebar-text: rgba(246, 243, 232, 0.72); /* was 0.60 — bumped for AA */ --sidebar-text-muted: rgba(246, 243, 232, 0.50); --sidebar-active: rgba(201, 168, 76, 0.16); --sidebar-hover: rgba(246, 243, 232, 0.07); --topbar-height: 60px; /* ── Typography ────────────────────────────────────────────────────── */ --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Font weights — keep options conservative */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Type scale — modular, ratio ≈ 1.2 from 12px base Each size has a paired line-height. Use them together: --text-md + --lh-md. */ --text-xs: 0.6875rem; /* 11px — labels, caption */ --text-sm: 0.75rem; /* 12px — small UI text */ --text-base: 0.8125rem; /* 13px — body, current default */ --text-md: 0.875rem; /* 14px — comfortable body */ --text-lg: 1rem; /* 16px — emphasized body */ --text-xl: 1.125rem; /* 18px — minor headings */ --text-2xl: 1.25rem; /* 20px — section headings */ --text-3xl: 1.5rem; /* 24px — page titles */ --text-4xl: 1.875rem; /* 30px — large titles */ --text-display: 2.5rem; /* 40px — auth, hero */ --lh-xs: 1.4; --lh-sm: 1.45; --lh-base: 1.5; --lh-md: 1.5; --lh-lg: 1.55; --lh-xl: 1.4; --lh-2xl: 1.35; --lh-3xl: 1.3; --lh-4xl: 1.25; --lh-display: 1.15; /* Letter spacing */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.05em; --ls-caps: 0.08em; /* uppercase labels */ /* ── Spacing (4px grid, ratio = 4) ─────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Border Radius ─────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px; /* ── Shadows ───────────────────────────────────────────────────────── */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(26, 26, 24, 0.06); --shadow-sm: 0 1px 3px rgba(26, 26, 24, 0.07); --shadow-md: 0 4px 12px rgba(26, 26, 24, 0.09), 0 1px 3px rgba(26, 26, 24, 0.05); --shadow-lg: 0 10px 28px rgba(26, 26, 24, 0.11), 0 4px 8px rgba(26, 26, 24, 0.06); --shadow-xl: 0 24px 48px rgba(26, 26, 24, 0.16), 0 8px 16px rgba(26, 26, 24, 0.08); --shadow-focus: 0 0 0 3px rgba(201, 168, 76, 0.25); --shadow-focus-danger: 0 0 0 3px rgba(166, 61, 47, 0.25); /* ── Z-index scale ─────────────────────────────────────────────────── */ --z-base: 1; --z-elevated: 10; --z-sticky: 100; --z-drawer: 200; --z-dropdown: 300; --z-modal: 500; --z-toast: 1000; --z-tooltip: 1500; --z-debug: 9999; /* ── Motion ────────────────────────────────────────────────────────── */ --duration-instant: 75ms; --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Legacy aliases — kept so existing pages don't break. All of these now point at semantic tokens so they flip in dark mode automatically. Migrate call sites to the semantic tokens (--color-border, --radius-md, --duration-* + --ease-*) and remove these once usage is zero. */ --transition-fast: var(--duration-fast) var(--ease-in-out); --transition-base: var(--duration-base) var(--ease-in-out); --border: var(--color-border); --radius: var(--radius-md); --surface: var(--color-surface-2); /* was hardcoded #EDEADF */ --surface-2: var(--color-surface-2); --accent: var(--color-primary); /* ── Breakpoints (mobile-first; consume in @media min-width) ──────── */ --bp-sm: 480px; /* phone landscape */ --bp-md: 768px; /* tablet portrait */ --bp-lg: 1024px; /* tablet landscape / small desktop */ --bp-xl: 1280px; /* desktop */ --bp-2xl: 1536px; /* wide desktop */ /* ── Layout containment ────────────────────────────────────────────── */ --content-max: 1200px; --content-narrow: 720px; --content-prose: 640px; } /* ───────────────────────────────────────────────────────────────────────── Dark mode — flip the SEMANTIC tokens only. Toggled by setting [data-theme="dark"] on (e.g. via a Settings switch or auto-detection). When the user has no preference, follow the OS via prefers-color-scheme below. ───────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #14140F; --color-bg-elevated: #1F1E18; --color-surface: #1F1E18; --color-surface-2: #181712; --color-surface-hover: rgba(246, 243, 232, 0.05); --color-overlay: rgba(0, 0, 0, 0.70); --color-border: rgba(246, 243, 232, 0.10); --color-border-light: rgba(246, 243, 232, 0.05); --color-border-strong: rgba(246, 243, 232, 0.22); --color-text: #ECE9DD; --color-text-muted: rgba(246, 243, 232, 0.72); --color-text-light: rgba(246, 243, 232, 0.55); --color-text-disabled: rgba(246, 243, 232, 0.30); --color-text-inverted: var(--ink); --color-link: var(--gold-bright); --color-link-hover: #F2D87A; --color-primary: var(--gold-bright); /* lighter gold reads better on dark */ --color-primary-hover: #F2D87A; --color-primary-light: rgba(232, 201, 90, 0.16); --color-primary-on: var(--night); --color-success-bg: rgba(74, 124, 89, 0.18); --color-warning-bg: rgba(184, 134, 11, 0.18); --color-danger-bg: rgba(166, 61, 47, 0.18); --color-info-bg: rgba(46, 97, 136, 0.20); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 3px rgba(232, 201, 90, 0.35); } /* Auto-follow OS unless the user has explicitly chosen via [data-theme="light"] */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --color-bg: #14140F; --color-bg-elevated: #1F1E18; --color-surface: #1F1E18; --color-surface-2: #181712; --color-surface-hover: rgba(246, 243, 232, 0.05); --color-overlay: rgba(0, 0, 0, 0.70); --color-border: rgba(246, 243, 232, 0.10); --color-border-light: rgba(246, 243, 232, 0.05); --color-border-strong: rgba(246, 243, 232, 0.22); --color-text: #ECE9DD; --color-text-muted: rgba(246, 243, 232, 0.72); --color-text-light: rgba(246, 243, 232, 0.55); --color-text-disabled: rgba(246, 243, 232, 0.30); --color-text-inverted: var(--ink); --color-link: var(--gold-bright); --color-link-hover: #F2D87A; --color-primary: var(--gold-bright); --color-primary-hover: #F2D87A; --color-primary-light: rgba(232, 201, 90, 0.16); --color-success-bg: rgba(74, 124, 89, 0.18); --color-warning-bg: rgba(184, 134, 11, 0.18); --color-danger-bg: rgba(166, 61, 47, 0.18); --color-info-bg: rgba(46, 97, 136, 0.20); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 3px rgba(232, 201, 90, 0.35); } } /* ───────────────────────────────────────────────────────────────────────── Global motion preference — collapse all transitions/animations for users who request reduced motion. Two layers: 1. Token collapse — components using --duration-* tokens get 0ms. 2. Universal override — any hard-coded literal (`transition: .15s`, `animation: spin 0.8s ...`) is forced to near-zero. Spinners stop, pulse animations stop, modal slide-ins stop. Required because not every component is on tokens yet. ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }