/* os-v11/base.css — hyOS v1.1 * Core CSS custom properties for the v1.1 system * Defines spring easings, glass geometry, shadow recipes, typography, and z-index scale * References: kinetics.colorion.co (spring physics), contained-app/macOS 26 (glass system) */ :root { /* ────────────────────────────────────────────────────────────── Spring Easings (Apple macOS 26 kinetics) ────────────────────────────────────────────────────────────── */ --v11-spring-card: cubic-bezier(0.34, 1.06, 0.64, 1.00); --v11-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1.00); --v11-spring-smooth: cubic-bezier(0.16, 1.00, 0.30, 1.00); --v11-spring-bounce: cubic-bezier(0.18, 1.25, 0.40, 1.00); --v11-spring-glide: cubic-bezier(0.65, 0.00, 0.35, 1.00); --v11-spring-magnetic: cubic-bezier(0.40, 0.00, 0.20, 1.00); --v11-spring-micro: cubic-bezier(0.34, 1.56, 0.64, 1.00); --v11-spring-snap: cubic-bezier(0.40, 0.00, 0.20, 1.00); /* ────────────────────────────────────────────────────────────── Timing Durations ────────────────────────────────────────────────────────────── */ --v11-duration-card: 0.42s; --v11-duration-snappy: 0.50s; --v11-duration-smooth: 0.45s; --v11-duration-bounce: 0.55s; --v11-duration-glide: 0.40s; --v11-duration-magnetic: 0.15s; --v11-duration-micro: 0.20s; --v11-duration-snap: 0.09s; /* ────────────────────────────────────────────────────────────── Glass Geometry ────────────────────────────────────────────────────────────── */ --v11-blur: 56px; --v11-blur-heavy: 72px; --v11-blur-light: 20px; --v11-radius: 18px; --v11-radius-lg: 24px; --v11-radius-sm: 12px; --v11-radius-xs: 8px; /* ────────────────────────────────────────────────────────────── Glass Foundation Colors ────────────────────────────────────────────────────────────── */ --v11-glass-bg: rgba(12, 12, 20, 0.52); --v11-glass-bg-dark: rgba(6, 6, 12, 0.68); --v11-glass-border: color-mix(in srgb, var(--accent, #00ffa3) 28%, rgba(255, 255, 255, 0.12)); --v11-glass-specular: rgba(255, 255, 255, 0.85); --v11-glass-inset-dark: rgba(0, 0, 0, 0.06); /* ────────────────────────────────────────────────────────────── Shadow Recipes (7-layer stack from macOS 26) ────────────────────────────────────────────────────────────── */ --v11-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.20), 0 10px 30px rgba(0, 0, 0, 0.30), 0 26px 60px rgba(0, 0, 0, 0.34), 0 52px 100px rgba(0, 0, 0, 0.22); --v11-shadow-sm: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.20), 0 6px 12px rgba(0, 0, 0, 0.15); --v11-shadow-lg: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.40), 0 32px 80px rgba(0, 0, 0, 0.45), 0 64px 140px rgba(0, 0, 0, 0.28); /* ────────────────────────────────────────────────────────────── Glow Effects ────────────────────────────────────────────────────────────── */ --v11-glow: 0 0 40px color-mix(in srgb, var(--accent, #00ffa3) 20%, transparent); --v11-glow-sm: 0 0 20px color-mix(in srgb, var(--accent, #00ffa3) 12%, transparent); --v11-glow-lg: 0 0 80px color-mix(in srgb, var(--accent, #00ffa3) 28%, transparent); --v11-glow-intense: 0 0 120px color-mix(in srgb, var(--accent, #00ffa3) 35%, transparent); /* ────────────────────────────────────────────────────────────── Typography ────────────────────────────────────────────────────────────── */ --v11-font-display: -apple-system, 'SF Pro Display', system-ui, -webkit-system-font, sans-serif; --v11-font-body: -apple-system, 'SF Pro Text', system-ui, -webkit-system-font, sans-serif; --v11-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace; --v11-fw-thin: 100; --v11-fw-light: 300; --v11-fw-regular: 400; --v11-fw-medium: 500; --v11-fw-semibold: 600; --v11-fw-bold: 700; --v11-lh-tight: 1.2; --v11-lh-normal: 1.5; --v11-lh-relaxed: 1.75; /* ────────────────────────────────────────────────────────────── Z-Index Scale ────────────────────────────────────────────────────────────── */ --v11-z-bg: 1; --v11-z-desktop: 10; --v11-z-dock: 100; --v11-z-taskbar: 110; --v11-z-windows: 200; --v11-z-drawer: 300; --v11-z-modal: 400; --v11-z-toast: 500; --v11-z-spotlight: 600; --v11-z-tooltip: 700; /* ────────────────────────────────────────────────────────────── Theme Tinting (updated by themes.css) ────────────────────────────────────────────────────────────── */ --v11-tint: color-mix(in srgb, var(--accent, #00ffa3) 22%, transparent); --v11-tint-subtle: color-mix(in srgb, var(--accent, #00ffa3) 10%, transparent); --v11-border-accent: color-mix(in srgb, var(--accent, #00ffa3) 28%, rgba(255, 255, 255, 0.12)); --v11-specular-accent: color-mix(in srgb, var(--accent, #00ffa3) 45%, rgba(255, 255, 255, 0.55)); /* ────────────────────────────────────────────────────────────── Spacing Scale (for consistent padding/margin) ────────────────────────────────────────────────────────────── */ --v11-space-xs: 4px; --v11-space-sm: 8px; --v11-space-md: 12px; --v11-space-lg: 16px; --v11-space-xl: 24px; --v11-space-2xl: 32px; /* ────────────────────────────────────────────────────────────── Backdrop Filter Support ────────────────────────────────────────────────────────────── */ --v11-backdrop: saturate(240%) blur(var(--v11-blur)) brightness(1.15); --v11-backdrop-heavy: saturate(240%) blur(var(--v11-blur-heavy)) brightness(1.15); --v11-backdrop-light: saturate(180%) blur(var(--v11-blur-light)) brightness(1.08); } /* ────────────────────────────────────────────────────────────── Reduced Motion Support ────────────────────────────────────────────────────────────── Override spring durations and easings for accessibility */