/* * Prism UI — Design Tokens * ------------------------- * Primary font: Geist. Icon font: Phosphor. * Design language: monochrome minimal, dot-grid canvas, floating panels, * pill buttons, rich animated color picker. Spring easing throughout. * Breakpoints: 640px / 420px. * * Usage: * or * Toggle with JS: document.documentElement.dataset.theme = 'dark' */ /* ─── Google Fonts + Phosphor Icons ──────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Geist:wght@300;400;500;600&family=Inter:wght@400;500;600&family=Lato:wght@400;700&display=swap'); @import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css'); @import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css'); /* ─── LIGHT MODE (default) ──────────────────────────────────────────────── */ :root, [data-theme="light"] { /* ── Core palette (matches source token names exactly) ─────────────────── */ --bg: #ffffff; --fg: #0a0a0a; --fg-muted: #737373; --fg-soft: #a3a3a3; --border: #e5e5e5; --border-focus: #a3a3a3; --border-strong: #d4d4d4; --surface: #ffffff; --surface-soft: #f4f4f5; --surface-soft-hover: #ececef; --grid-dot: #e5e5e5; /* ── Semantic / status colours ─────────────────────────────────────────── */ --color-red: #ef4444; --color-red-subtle: #fee2e2; --color-orange: #f97316; --color-orange-subtle:#ffedd5; --color-yellow: #eab308; --color-yellow-subtle:#fef9c3; --color-green: #22c55e; --color-green-subtle: #dcfce7; --color-sky: #0ea5e9; --color-sky-subtle: #e0f2fe; --color-blue: #3b82f6; --color-blue-subtle: #dbeafe; --color-purple: #a855f7; --color-purple-subtle:#f3e8ff; --color-pink: #ec4899; --color-pink-subtle: #fce7f3; /* Danger state (used in context menus, destructive actions) */ --color-danger: #b91c1c; --color-danger-bg: #fee2e2; --color-danger-border:#fca5a5; /* ── Typography ─────────────────────────────────────────────────────────── */ --font-family-base: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-family-active: var(--font-family-base); /* overridden by font switcher */ --font-family-mono: 'Geist Mono', 'SF Mono', Monaco, monospace; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold:600; --letter-spacing-tight: -0.005em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.08em; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.5; /* ── Spacing (4px base) ─────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 18px; --space-9: 20px; --space-10:24px; --space-12:28px; --space-14:32px; --space-16:40px; /* ── Radius ─────────────────────────────────────────────────────────────── */ --radius: 16px; /* panel/card radius — from source */ --radius-sm: 10px; /* button/pill inner elements */ --radius-xs: 8px; /* inputs, small elements */ --radius-2xs: 6px; /* context menu rows, badges */ --radius-full: 9999px; /* Active radius */ --radius-btn: var(--radius-full); --radius-card: var(--radius); --radius-input: var(--radius-xs); /* ── Shadows ────────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 8px 24px -8px rgba(0,0,0,0.12), 0 2px 8px -2px rgba(0,0,0,0.06); --shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.15), 0 4px 12px -4px rgba(0,0,0,0.08); /* Active shadow */ --shadow-card: var(--shadow); /* ── Motion ──────────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* spring — primary easing */ --ease-dropdown: cubic-bezier(0.22, 1, 0.36, 1); /* dropdown open/close */ --ease-inout: ease-in-out; /* icon swap */ /* Durations */ --dur-fast: 100ms; --dur-normal: 150ms; --dur-medium: 200ms; --dur-slow: 250ms; /* Compound transitions */ --transition-btn: background var(--dur-normal) var(--ease), transform var(--dur-fast) var(--ease); --transition-border: border-color var(--dur-normal) var(--ease); --transition-color: color var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease); /* Icon swap animation vars */ --icon-swap-dur: 200ms; --icon-swap-blur: 2px; --icon-swap-start-scale: 0.25; /* Dropdown animation vars */ --dropdown-open-dur: 250ms; --dropdown-close-dur: 150ms; --dropdown-pre-scale: 0.97; --dropdown-closing-scale: 0.99; /* ── Layout ─────────────────────────────────────────────────────────────── */ --toolbar-height: 58px; --toolbar-padding: 10px; --topbar-height: 38px; --topbar-offset: 20px; /* ── Z-index ─────────────────────────────────────────────────────────────── */ --z-base: 0; --z-toolbar: 40; --z-nav: 50; --z-popover: 49; --z-dropdown: 80; --z-menu: 100; } /* ─── DARK MODE ──────────────────────────────────────────────────────────── */ /* * Comes AFTER seeds — wins the cascade for all colour/surface tokens. * Only radius tokens (no dark variant) are intentionally left to seeds above. */ [data-theme="dark"] { --bg: #0a0a0a; --fg: #f5f5f5; --fg-muted: #a3a3a3; --fg-soft: #525252; --border: #2a2a2a; --border-focus: #525252; --border-strong: #3d3d3d; --surface: #161616; --surface-soft: #1e1e1e; --surface-soft-hover: #252525; --grid-dot: #222222; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 8px 24px -8px rgba(0,0,0,0.7), 0 2px 8px -2px rgba(0,0,0,0.5); --shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.8), 0 4px 12px -4px rgba(0,0,0,0.6); } /* ─── BASE RESETS ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size-base); letter-spacing: var(--letter-spacing-tight); scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: var(--font-family-active, var(--font-family-base)); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-snug); color: var(--fg); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease); } ::selection { background: rgba(10, 10, 10, 0.1); } [data-theme="dark"] ::selection { background: rgba(255, 255, 255, 0.15); } a { color: var(--fg); text-decoration: none; }