/* ============================================================ THEME — Liquid Glass ----------------------------------------------------------- This is the ONE FILE users swap to reskin their site. Replace this file with any other theme.css to change the entire look & feel. Tokens only — no component CSS lives here. TOKEN CONTRACT ----------------------------------------------------------- Every theme MUST declare every variable in this file, even if it sets it to a neutral value (e.g. --blur-md: none;). That's what guarantees a clean one-file swap. Slots: Surfaces : --paper, --paper-raised, --paper-sunk, --paper-glass Ink : --ink, --ink-soft, --ink-faint, --graphite, --muted Lines : --guide, --guide-soft, --hair, --hair-soft Primary : --ai, --ai-ink, --ai-wash (iOS indigo) Seal : --shu, --shu-wash (iOS system pink) Accent : --ochre, --ochre-wash (iOS orange) Code : --code-bg/ink/muted/accent/green/blue Type : --font-display/script/serif/sans/mono Radius : --r-sm, --r-md, --r-lg Shadow : --shadow-sm, --shadow-md, --shadow-lg Blur : --blur-sm, --blur-md, --blur-lg (glass is the star here) Glow : --glow-sm, --glow-md, --glow-lg (dual-inset rim light) Motion : --duration-fast, --duration-normal, --duration-slow, --ease NOTE ON MESH BACKGROUNDS ----------------------------------------------------------- A page-level mesh gradient is NOT a theme token. The base --paper slot is a pastel-tint white so surfaces look vibrant out of the box; consumers who want the full visionOS mesh should add a background-image at the page level themselves. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* Surfaces — frosted translucent over a lavender-tint base */ --paper: #F4EEFF; --paper-raised: #FFFFFF; --paper-sunk: #E8E0F5; --paper-glass: rgba(255, 255, 255, 0.55); /* Ink — warm near-black, Apple style */ --ink: #1D1D1F; --ink-soft: #3A3A3C; --ink-faint: #8E8E93; --graphite: #2C2C2E; --muted: #6E6E73; /* Construction lines — glass doesn't like hard edges */ --guide: rgba(29, 29, 31, 0.14); --guide-soft: rgba(29, 29, 31, 0.10); --hair: rgba(29, 29, 31, 0.08); --hair-soft: rgba(29, 29, 31, 0.04); /* Primary accent — iOS indigo */ --ai: #5E5CE6; --ai-ink: #3634A3; --ai-wash: rgba(94, 92, 230, 0.12); /* Seal — iOS system pink (draft / emphasis) */ --shu: #FF375F; --shu-wash: rgba(255, 55, 95, 0.12); /* Draft / marginalia — iOS orange */ --ochre: #FF9500; --ochre-wash: rgba(255, 149, 0, 0.14); /* Code surface */ --code-bg: rgba(29, 29, 31, 0.82); --code-ink: #F5F5F7; --code-muted: #9A9AA0; --code-accent: #FFD60A; --code-green: #30D158; --code-blue: #64D2FF; /* Typography — SF system stack */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; /* Radius — soft and large, iOS-style */ --r-sm: 10px; --r-md: 18px; --r-lg: 24px; /* Shadows — floaty with a cool-blue undertone */ --shadow-sm: 0 2px 10px rgba(31, 38, 135, 0.06); --shadow-md: 0 8px 32px rgba(31, 38, 135, 0.10); --shadow-lg: 0 24px 60px rgba(31, 38, 135, 0.14); --shadow-xl: 0 40px 80px rgba(31, 38, 135, 0.18); --shadow-2xl: 0 56px 112px rgba(31, 38, 135, 0.24); /* Blur — the star of this theme; pair with --paper-glass */ --blur-sm: blur(14px) saturate(160%); --blur-md: blur(22px) saturate(170%); --blur-lg: blur(30px) saturate(180%); /* Glow — dual-inset rim highlight (catches light like visionOS) */ --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.70); --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.20), inset 1px 0 0 rgba(255, 255, 255, 0.35), inset -1px 0 0 rgba(255, 255, 255, 0.20); --glow-lg: inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(255, 255, 255, 0.25), inset 2px 0 0 rgba(255, 255, 255, 0.45), inset -2px 0 0 rgba(255, 255, 255, 0.25), inset 0 0 40px rgba(255, 255, 255, 0.15); /* Motion */ --duration-fast: 180ms; --duration-normal: 240ms; --duration-slow: 380ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ----------------------------------------------------------- Bridge the library's expected names to this theme's native palette. Components can now write m.color(surface-default) or var(--surface-default) and reskin with the theme automatically. ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive (hover / active wash layers) Kept subtle so glass translucency reads through. */ --interactive-hover: rgba(29, 29, 31, 0.04); --interactive-active: rgba(29, 29, 31, 0.08); /* Brand (identity — action-primary usually references these) */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action (primary / secondary / tertiary) */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback / status (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (three-part: default / subtle / text) */ --info-default: var(--ai); --info-subtle: rgba(94, 92, 230, 0.12); --info-text: var(--ai-ink); /* Status — success (iOS system green) */ --success-default: #34C759; --success-subtle: rgba(52, 199, 89, 0.12); --success-text: #1E8838; /* Status — warning (iOS system orange) */ --warning-default: var(--ochre); --warning-subtle: rgba(255, 149, 0, 0.12); --warning-text: #B36600; /* Status — error (iOS system pink) */ --error-default: var(--shu); --error-subtle: rgba(255, 55, 95, 0.12); --error-text: #A3193A; /* ---------------------------------------------------------- LIBRARY SCALES (space / radius / type / motion / z) ----------------------------------------------------------- The library mixins emit var(--space-), var(--radius-), var(--font-primary), var(--font-size-), var(--z-), … Themes declare the slots so those mixins always resolve. ---------------------------------------------------------- */ /* Space scale (rem for accessibility) */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; /* Radius alias — mirrors --r-* with standard names so `m.radius(size)` in the library finds --radius-. */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Typography — base body font + key scale slots */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; }