/* * MarketRush design tokens. * Every hex / spacing / radius / shadow / font in the system. * If you're about to write a raw color or px value in components.css, * stop and add it here first (or reach for an existing token). * * Reference: docs/design-system.md §2–§6. */ :root { /* -------- 2.1 Surfaces -------- */ --mras-bg: #F6F5F1; --mras-sidebar-bg: #FBFAF6; --mras-sidebar-hover: #F1EFEA; --mras-sidebar-active: #EDE9E0; --mras-surface: #FFFFFF; --mras-surface-cream: #FBF9F4; /* -------- 2.2 Brand + accent -------- */ --mras-brand-green: #0D3B2A; --mras-brand-green-soft: #1F5F44; --mras-brand-green-line: rgba(13, 59, 42, 0.08); --mras-brand-green-tint: rgba(13, 59, 42, 0.04); --mras-orange-1: #FF6B35; --mras-orange-2: #F59E0B; --mras-grad-orange: linear-gradient(135deg, #FF6B35 0%, #F59E0B 100%); --mras-grad-orange-soft: linear-gradient(135deg, rgba(255, 107, 53, 0.14) 0%, rgba(245, 158, 11, 0.14) 100%); /* -------- 2.3 Text -------- */ --mras-text: #0D3B2A; --mras-text-muted: #5A6D65; --mras-text-subtle: #8B9A93; --mras-text-on-primary: #FFFFFF; /* -------- 2.4 Semantic (state) -------- */ --mras-success: #047857; --mras-success-bg: rgba(4, 120, 87, 0.10); --mras-warning: #B45309; --mras-warning-bg: rgba(245, 158, 11, 0.14); --mras-danger: #B91C1C; --mras-danger-bg: rgba(185, 28, 28, 0.10); --mras-info: #C2410C; --mras-info-bg: rgba(255, 107, 53, 0.10); --mras-off-bg: rgba(13, 59, 42, 0.06); /* -------- 2.5 Borders -------- */ --mras-line: rgba(13, 59, 42, 0.08); --mras-line-strong: rgba(13, 59, 42, 0.16); /* -------- 3.1 Fonts -------- */ --mras-font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mras-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mras-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* -------- 4 Spacing scale (4px base) -------- */ --mras-s-1: 4px; --mras-s-2: 8px; --mras-s-3: 12px; --mras-s-4: 16px; --mras-s-5: 20px; --mras-s-6: 24px; --mras-s-7: 32px; --mras-s-8: 40px; --mras-s-9: 48px; --mras-s-10: 64px; /* -------- 5 Radii -------- */ --mras-r-sm: 4px; --mras-r: 8px; --mras-r-md: 12px; --mras-r-lg: 18px; --mras-r-pill: 999px; /* -------- 6 Elevation -------- */ --mras-shadow-sm: 0 1px 2px rgba(13, 59, 42, 0.03); --mras-shadow: 0 4px 20px rgba(13, 59, 42, 0.06); --mras-shadow-lg: 0 12px 40px rgba(13, 59, 42, 0.10); /* -------- Focus ring (§7.8) -------- */ --mras-ring: 0 0 0 3px rgba(255, 107, 53, 0.15); } /* ============================================================ Dark theme. Two selectors so the theme can be triggered three ways: 1. `` has NO data-theme attribute → OS `prefers-color-scheme: dark` wins. 2. `` → forced dark regardless of OS. 3. `` → forced light regardless of OS. Only surface / text / border / shadow / semantic-bg tokens flip. Brand accent (`--mras-brand-green`, `--mras-orange-1`) stays as-is because tenant identity shouldn't change with system theme. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Surfaces — near-black with a warm bias so the brand green reads as intentional rather than mismatched. */ --mras-bg: #0F1211; --mras-sidebar-bg: #14181A; --mras-sidebar-hover: #1D2226; --mras-sidebar-active: #262C31; --mras-surface: #181D20; --mras-surface-cream: #1E2429; /* Brand-green shifts to a lifted mint so it reads on dark AND still works as a button background. Anywhere brand-green is used as TEXT (links, prices, badges) — same token flips, no need for a separate -text alias. */ --mras-brand-green: #34D399; --mras-brand-green-soft: #6EE7B7; --mras-brand-green-line: rgba(220, 235, 228, 0.08); --mras-brand-green-tint: rgba(220, 235, 228, 0.04); /* Text-on-primary flips: mint bg needs DARK text (white on mint fails WCAG contrast). Uses the dark-bg value so buttons feel intentional against the page. */ --mras-text-on-primary: #0F1211; /* Text — near-white, warm bias. */ --mras-text: #E9EDEB; --mras-text-muted: #A6B2AE; --mras-text-subtle: #6F7C78; /* Semantic state — same hue, tone-shifted for dark. */ --mras-success-bg: rgba(4, 120, 87, 0.20); --mras-warning-bg: rgba(245, 158, 11, 0.20); --mras-danger-bg: rgba(220, 38, 38, 0.18); --mras-info-bg: rgba(255, 107, 53, 0.16); --mras-off-bg: rgba(220, 235, 228, 0.06); /* Borders */ --mras-line: rgba(220, 235, 228, 0.10); --mras-line-strong: rgba(220, 235, 228, 0.20); /* Elevation — deeper black + softer alpha since surfaces are dark. */ --mras-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --mras-shadow: 0 4px 20px rgba(0, 0, 0, 0.40); --mras-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50); } } /* Explicit force-dark. Duplicates the above so `data-theme="dark"` works even when the OS is in light mode. */ :root[data-theme="dark"] { --mras-bg: #0F1211; --mras-sidebar-bg: #14181A; --mras-sidebar-hover: #1D2226; --mras-sidebar-active: #262C31; --mras-surface: #181D20; --mras-surface-cream: #1E2429; --mras-brand-green: #34D399; --mras-brand-green-soft: #6EE7B7; --mras-brand-green-line: rgba(220, 235, 228, 0.08); --mras-brand-green-tint: rgba(220, 235, 228, 0.04); --mras-text-on-primary: #0F1211; --mras-text: #E9EDEB; --mras-text-muted: #A6B2AE; --mras-text-subtle: #6F7C78; --mras-success-bg: rgba(4, 120, 87, 0.20); --mras-warning-bg: rgba(245, 158, 11, 0.20); --mras-danger-bg: rgba(220, 38, 38, 0.18); --mras-info-bg: rgba(255, 107, 53, 0.16); --mras-off-bg: rgba(220, 235, 228, 0.06); --mras-line: rgba(220, 235, 228, 0.10); --mras-line-strong: rgba(220, 235, 228, 0.20); --mras-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --mras-shadow: 0 4px 20px rgba(0, 0, 0, 0.40); --mras-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50); } /* Reset (minimal — modern browsers) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; } body { font-family: var(--mras-font-sans); color: var(--mras-text); background: radial-gradient(circle at 100% 0%, rgba(255, 107, 53, 0.05), transparent 40%), radial-gradient(circle at 0% 100%, rgba(31, 95, 68, 0.05), transparent 40%), var(--mras-bg); background-attachment: fixed; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.005em; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; }