/* PRISM design tokens — Apple-inspired (SF Pro feel, glass surfaces, monochrome base + a single indigo accent). Light is default; dark is activated with [data-theme="dark"] on . The pre-paint inline script in index.html sets the right value before stylesheets load, so there is no flash of wrong theme. */ :root { /* === Brand accent (shared across themes; just one) === */ --accent-rgb: 94, 92, 230; /* indigo, Apple-ish */ --accent: rgb(var(--accent-rgb)); --accent-soft: rgba(var(--accent-rgb), 0.12); --accent-strong: rgba(var(--accent-rgb), 0.85); /* === Semantic status colors (theme-invariant on hue, theme-tuned on bg) === */ --status-success: #34c759; --status-warning: #ff9f0a; --status-error: #ff3b30; --status-info: #0a84ff; /* === LIGHT (default) === */ --bg-app: #f5f5f7; /* paper white */ --bg-elevated: #ffffff; /* card */ --bg-elevated-2: rgba(255,255,255,0.72); /* glass card */ --bg-sidebar: rgba(255,255,255,0.66); /* glass sidebar */ --bg-topbar: rgba(245,245,247,0.72); --bg-overlay: rgba(0,0,0,0.4); --bg-input: rgba(0,0,0,0.04); --bg-input-focus:rgba(0,0,0,0.06); --bg-hover: rgba(0,0,0,0.04); --bg-active: rgba(0,0,0,0.06); --text-primary: #1d1d1f; /* near-black */ --text-secondary: #515154; --text-tertiary: #86868b; --text-on-accent: #ffffff; --border-subtle: rgba(0,0,0,0.06); --border-strong: rgba(0,0,0,0.12); --border-focus: var(--accent); /* Cards lean on the border + a soft floor-shadow, not the diffused glow that signals "AI saas template". Tweak both halves together when adjusting overall weight. */ --shadow-card: 0 1px 2px rgba(0,0,0,0.03), 0 1px 0 rgba(0,0,0,0.03); --shadow-popover:0 8px 24px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04); --shadow-button: 0 1px 1px rgba(0,0,0,0.04); /* Glass intensities — strong blur is the Apple signature. */ --glass-blur: saturate(1.5) blur(22px); --glass-blur-lg: saturate(1.6) blur(40px); /* Typography. Apple stack first, Inter as web fallback. */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace; /* Type scale (px-precise; rem to keep user font scaling working) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-base: 0.9375rem; /* 15 */ --text-md: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-hero: 4rem; /* 64 */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed:1.7; --tracking-tight: -0.022em; /* SF Pro Display tightens at large sizes */ --tracking-normal: 0; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing — 4px grid */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Radii — Apple's are large */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 9999px; /* Motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emph: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 320ms; /* Layout */ --sidebar-width: 264px; --topbar-height: 56px; --content-max-width: 1080px; /* Z-index */ --z-sidebar: 40; --z-topbar: 30; --z-modal: 50; --z-toast: 60; } /* === DARK === */ [data-theme="dark"] { --bg-app: #000000; /* iOS dark */ --bg-elevated: #1c1c1e; --bg-elevated-2: rgba(28,28,30,0.66); --bg-sidebar: rgba(28,28,30,0.6); --bg-topbar: rgba(0,0,0,0.55); --bg-overlay: rgba(0,0,0,0.6); --bg-input: rgba(255,255,255,0.06); --bg-input-focus:rgba(255,255,255,0.08); --bg-hover: rgba(255,255,255,0.05); --bg-active: rgba(255,255,255,0.08); --text-primary: #f5f5f7; --text-secondary: #a1a1a6; --text-tertiary: #6e6e73; --text-on-accent: #ffffff; --border-subtle: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --shadow-card: 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.04); --shadow-popover:0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.6); --shadow-button: none; /* Status hues stay readable on dark */ --status-success: #30d158; --status-warning: #ffd60a; --status-error: #ff453a; --status-info: #0a84ff; } /* Auto-pick dark when nothing is stored AND OS prefers it. The HTML pre-paint script sets data-theme; this :media block is a no-op when data-theme is already set. It exists as a CSS-only fallback for environments where the inline script didn't run (e.g. test pages). */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; } } html { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } }