/* Design tokens — Median Snap brand system. * * Brand palette: White + Snapchat yellow + Cyan accent. * Full light theme — sidebar matches main, no dark/light split. * * Influences: Stripe / Vercel (precision light themes, signature accents), * Linear (typography precision, semi-transparent borders), * Raycast (single-accent restraint). * * Rules: * - Yellow appears ONLY on primary CTAs, active nav, and brand mark. * - Cyan appears ONLY on info status, live indicators, links. * - Status colors (success/warning/error) are universal semantics. * - Body text is warm near-black (#1A1A18) — never pure black. * - Background is warm off-white (#FAFAF8) — never pure white. * - No fallbacks in var() calls. * * Every value has a WHY in its comment. */ :root { /* ================================================================= SPACING — 8pt grid (DESIGN-BIBLE §1) ================================================================= */ --space-0: 0; --space-0-5: 0.25rem; /* 4px — half-unit, icon offsets */ --space-1: 0.5rem; /* 8px — tight internal padding */ --space-1-5: 0.75rem; /* 12px — table cells, button padding */ --space-2: 1rem; /* 16px — standard internal padding */ --space-2-5: 1.25rem; /* 20px — between standard and card padding */ --space-3: 1.5rem; /* 24px — card padding, section gaps */ --space-4: 2rem; /* 32px — group separation */ --space-5: 2.5rem; /* 40px — section padding */ --space-6: 3rem; /* 48px — large section gaps */ --space-7: 3.5rem; /* 56px */ --space-8: 4rem; /* 64px — major section breaks */ --space-10: 5rem; /* 80px */ /* ================================================================= TYPOGRAPHY — Inter Variable, Linear-style precision ================================================================= */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* OpenType features applied globally on : cv01 = single-story 'a' (geometric), cv11 = open '4', ss01 = cleaner numerals, ss03 = adjusted letterforms. Together turn Inter into a more "engineered" type voice. */ --font-features: "cv01", "cv11", "ss01", "ss03"; /* Sizes — Major Third scale */ --text-xs: 0.75rem; /* 12px — labels, micro-copy */ --text-sm: 0.8125rem; /* 13px — table cells, body small */ --text-base: 0.9375rem; /* 15px — body */ --text-lg: 1.0625rem; /* 17px — section title */ --text-xl: 1.25rem; /* 20px — H3, card title large */ --text-2xl: 1.5rem; /* 24px — H2, sub-section */ --text-2xs: 0.6875rem; /* 11px — eyebrow labels, micro-stats */ --text-3xl: 2rem; /* 32px — H1, page title */ --text-4xl: 2.5rem; /* 40px — display */ --text-5xl: 3rem; /* 48px — hero stat (signature metric per page) */ /* Weights. 510 is Linear's signature emphasis weight, between regular 400 and medium 500. Used for nav, button labels, UI emphasis. */ --font-regular: 400; --font-emphasis: 510; --font-semibold: 590; --font-bold: 700; --font-medium: var(--font-emphasis); /* alias for back-compat */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Tighter letter-spacing at display sizes (Linear technique) */ --tracking-display: -0.044em; --tracking-tight: -0.018em; --tracking-snug: -0.011em; --tracking-body: 0; --tracking-wide: 0.02em; --tracking-widest: 0.08em; /* ================================================================= BRAND PALETTE 1/3 — Snap yellow ramp (#FFFC00 anchor) Used ONLY on primary CTAs, active nav, brand mark. ================================================================= */ --brand-50: #FFFEF0; --brand-100: #FFFCD1; --brand-200: #FFF99E; --brand-300: #FFF566; --brand-400: #FFF02E; --brand-500: #FFFC00; /* anchor — official Snapchat yellow */ --brand-600: #E5E000; --brand-700: #B8B400; --brand-800: #8A8700; --brand-900: #5C5A00; --brand-950: #3D3B00; --brand-gradient: linear-gradient(135deg, #FFF566 0%, #FFFC00 50%, #E5E000 100%); --brand-glow: radial-gradient(circle at 30% 20%, rgba(255, 252, 0, 0.10) 0%, transparent 60%); /* ================================================================= BRAND PALETTE 2/3 — Cyan accent ramp (#06B6D4 anchor) Vibrant but not neon. Used for info status, live indicators, links, data visualization. The "data color" of the system. ================================================================= */ --accent-50: #ECFEFF; --accent-100: #CFFAFE; --accent-200: #A5F3FC; --accent-300: #67E8F9; --accent-400: #22D3EE; --accent-500: #06B6D4; /* anchor — vibrant cyan */ --accent-600: #0891B2; --accent-700: #0E7490; --accent-800: #155E75; --accent-900: #164E63; --accent-950: #083344; --accent-glow: 0 0 24px rgba(6, 182, 212, 0.25); /* ================================================================= BRAND PALETTE 3/3 — White + neutrals (warm off-white base) The dominant color of the UI. Pure white (#FFFFFF) reserved for cards / raised surfaces — the page itself uses warm off-white to reduce eye strain on long sessions. ================================================================= */ --surface-base: #FAFAF8; /* page background — warm off-white */ --surface-raised: #FFFFFF; /* cards, panels — pure white "rises" */ --surface-sunken: #F4F4F0; /* table headers, code blocks, dropdowns */ --surface-overlay: #F0F0EC; /* sticky chrome, popovers */ --surface-modal: #FFFFFF; --surface-ground: #F4F4F0; /* sidebar — subtle tint to separate from main */ --surface-highest: rgba(244, 244, 240, 0.95); /* tooltips, top layer (toggle off-state) */ /* ================================================================= TEXT — warm near-black (never pure #000) ================================================================= */ --text-primary: #1A1A18; /* body — warm near-black */ --text-secondary: #57575A; /* descriptions, body small */ --text-tertiary: #8A8A85; /* captions, metadata, placeholders */ --text-quaternary: #B8B8B3; /* timestamps, disabled */ --text-inverse: #FAFAF8; /* light text — used on dark surfaces (rare) */ --text-on-brand: #1A1A18; /* dark text on yellow CTAs */ --text-on-accent: #FAFAF8; /* light text on cyan accents */ --text-brand: #8A8700; /* yellow-tinted text on white (legible — brand-800) */ --text-accent: #0E7490; /* cyan-tinted text on white (links — accent-700) */ /* ================================================================= BORDERS — semi-transparent black for soft definition ================================================================= */ --border-subtle: rgba(0, 0, 0, 0.06); /* default — card outlines */ --border-default: rgba(0, 0, 0, 0.10); /* inputs, table dividers */ --border-strong: rgba(0, 0, 0, 0.16); /* hover states */ --border-focus: var(--brand-500); /* ================================================================= SEMANTIC STATUS — universal severity colors (light-theme tuned) ================================================================= */ --color-success: #059669; /* emerald, sufficient contrast on white */ --color-success-bg: rgba(5, 150, 105, 0.10); --color-success-border: rgba(5, 150, 105, 0.25); --color-warning: #D97706; /* amber, dark enough for white bg */ --color-warning-bg: rgba(217, 119, 6, 0.10); --color-warning-border: rgba(217, 119, 6, 0.25); --color-error: #DC2626; /* red, accessible on white */ --color-error-bg: rgba(220, 38, 38, 0.10); --color-error-border: rgba(220, 38, 38, 0.25); --color-info: var(--accent-500); /* cyan */ --color-info-bg: rgba(6, 182, 212, 0.10); --color-info-border: rgba(6, 182, 212, 0.25); /* ================================================================= INTERACTIVE STATES — overlays ================================================================= */ --state-hover: rgba(0, 0, 0, 0.04); --state-active: rgba(0, 0, 0, 0.07); --state-selected: rgba(255, 252, 0, 0.20); /* yellow tint, visible on white */ --state-focus-ring: 0 0 0 3px rgba(6, 182, 212, 0.30); /* cyan focus, distinctive */ /* Yellow tints — used across the system to anchor brand without flooding. Naming = visual scale, not semantic role. Composing CSS reaches for these instead of hardcoding rgba(255, 252, 0, *). */ --brand-tint-faint: rgba(255, 252, 0, 0.06); /* table hover, ambient */ --brand-tint-subtle: rgba(255, 252, 0, 0.10); /* nav active bg */ --brand-tint-muted: rgba(255, 252, 0, 0.20); /* selected state, badge */ --brand-tint-strong: rgba(255, 252, 0, 0.30); /* CTA shadow, focus ring */ --brand-border-subtle: rgba(255, 252, 0, 0.30); /* yellow-tinted borders */ /* ================================================================= SHADOWS — soft, low-opacity black (light-theme tuning) ================================================================= */ --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.04), 0 1px 3px rgba(15, 15, 15, 0.06); --shadow-md: 0 2px 4px rgba(15, 15, 15, 0.04), 0 4px 12px rgba(15, 15, 15, 0.08); --shadow-lg: 0 4px 8px rgba(15, 15, 15, 0.05), 0 12px 32px rgba(15, 15, 15, 0.10); --shadow-xl: 0 8px 16px rgba(15, 15, 15, 0.06), 0 24px 64px rgba(15, 15, 15, 0.12); --shadow-glow: 0 0 24px rgba(255, 252, 0, 0.30); /* yellow CTA glow */ --shadow-brand-sm: 0 4px 14px rgba(255, 252, 0, 0.25); /* primary button rest */ --shadow-brand-md: 0 8px 24px rgba(255, 252, 0, 0.40); /* primary button hover */ /* ================================================================= RADII ================================================================= */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 9999px; /* ================================================================= MOTION ================================================================= */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --pulse-duration: 2.2s; --pulse-duration-urgent: 1.0s; /* ================================================================= LAYOUT ================================================================= */ --sidebar-width: 244px; --content-max-width: 1360px; --topbar-height: 56px; --drawer-width: 480px; } html { font-feature-settings: var(--font-features); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }