/* ──────────────────────────────────────────────────────── TRISTAN OS — Design Tokens 3 styles (liquid, classic, mix) × 4 themes (midnight, aurora, peach, mist) = 12 combinations. Apply via two classes on : The frontend's Settings screen lets the owner change them; the choice is persisted server-side via /api/settings/prefs. ──────────────────────────────────────────────────────── */ /* ── Universal: spring + duration tokens ─────────────────── */ :root { /* Easing — the spring curves come from iOS-y motion design */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1); /* Durations */ --dur-instant: 0.1s; --dur-fast: 0.2s; --dur-normal: 0.3s; --dur-slow: 0.5s; --dur-slower: 0.8s; /* Spacing scale (4px grid) */ --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; /* Type weights */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter spacing */ --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-caps: 0.04em; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.5; /* Type scale */ --text-display: 28px; --text-h1: 24px; --text-h2: 20px; --text-h3: 17px; --text-body: 14px; --text-body-sm: 13px; --text-caption: 12px; --text-tiny: 11px; /* Safe-area (iOS notch) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ════════════════════════════════════════════════════════ STYLE A · LIQUID GLASS (iOS 26 — heavy blur, rounded) ════════════════════════════════════════════════════════ */ .style-liquid { --glass-bg: rgba(255, 255, 255, 0.06); --glass-bg-hover: rgba(255, 255, 255, 0.10); --glass-bg-strong: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.16); --glass-border-strong: rgba(255, 255, 255, 0.24); --blur-card: 40px; --blur-modal: 60px; --blur-nav: 80px; --saturation: saturate(180%); --shine: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 30%, transparent 50%); --r-card: 28px; --r-button: 999px; --r-input: 20px; --r-pill: 999px; --r-small: 14px; --shadow-card: 0 8px 32px rgba(0,0,0,0.12); --shadow-modal: 0 24px 64px rgba(0,0,0,0.32); --shadow-nav: 0 -8px 32px rgba(0,0,0,0.15); --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui; --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui; --f-mono: "SF Mono", "Menlo", monospace; } /* ════════════════════════════════════════════════════════ STYLE B · CLASSIC GLASS (iOS 14 — moderate blur) ════════════════════════════════════════════════════════ */ .style-classic { --glass-bg: rgba(255, 255, 255, 0.14); --glass-bg-hover: rgba(255, 255, 255, 0.20); --glass-bg-strong: rgba(255, 255, 255, 0.22); --glass-border: rgba(255, 255, 255, 0.24); --glass-border-strong: rgba(255, 255, 255, 0.32); --blur-card: 20px; --blur-modal: 30px; --blur-nav: 40px; --saturation: saturate(150%); --shine: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 40%); --r-card: 22px; --r-button: 14px; --r-input: 16px; --r-pill: 999px; --r-small: 10px; --shadow-card: 0 6px 20px rgba(0,0,0,0.18); --shadow-modal: 0 16px 48px rgba(0,0,0,0.35); --shadow-nav: 0 -4px 20px rgba(0,0,0,0.20); --f-display: "Inter", -apple-system, system-ui; --f-body: "Inter", -apple-system, system-ui; --f-mono: "JetBrains Mono", monospace; } /* ════════════════════════════════════════════════════════ STYLE C · MIX (flagship — glass + gradient mesh) ════════════════════════════════════════════════════════ */ .style-mix { --glass-bg: rgba(255, 255, 255, 0.08); --glass-bg-hover: rgba(255, 255, 255, 0.14); --glass-bg-strong: rgba(255, 255, 255, 0.18); --glass-border: rgba(255, 255, 255, 0.20); --glass-border-strong: rgba(255, 255, 255, 0.30); --blur-card: 30px; --blur-modal: 50px; --blur-nav: 60px; --saturation: saturate(200%); --r-card: 24px; --r-button: 999px; --r-input: 18px; --r-pill: 999px; --r-small: 12px; --shadow-card: 0 10px 40px rgba(0,0,0,0.20); --shadow-modal: 0 20px 60px rgba(0,0,0,0.40); --shadow-nav: 0 -6px 28px rgba(0,0,0,0.18); --f-display: "Satoshi", "Plus Jakarta Sans", -apple-system, system-ui; --f-body: "Satoshi", "Plus Jakarta Sans", -apple-system, system-ui; --f-mono: "JetBrains Mono", monospace; } .style-mix body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(at 20% 30%, rgba(var(--accent-primary-rgb), 0.18) 0, transparent 50%), radial-gradient(at 80% 70%, rgba(var(--accent-secondary-rgb), 0.14) 0, transparent 50%), radial-gradient(at 50% 90%, rgba(var(--accent-tertiary-rgb), 0.10) 0, transparent 50%); pointer-events: none; z-index: 0; animation: meshDrift 30s ease-in-out infinite alternate; } @keyframes meshDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -15px) scale(1.05); } 100% { transform: translate(-10px, 20px) scale(0.98); } } /* ════════════════════════════════════════════════════════ THEMES (4) Each theme defines colors. Layer with a style for full effect. ════════════════════════════════════════════════════════ */ /* Theme 1 · Midnight (dark, cool) */ .theme-midnight { --bg-base: #0a0e1a; --bg-elevated: #131829; --text-primary: #f5f7fb; --text-secondary: rgba(245, 247, 251, 0.72); --text-tertiary: rgba(245, 247, 251, 0.48); --text-muted: rgba(245, 247, 251, 0.32); --accent-primary: #4a9eff; --accent-primary-rgb: 74, 158, 255; --accent-secondary: #a855f7; --accent-secondary-rgb: 168, 85, 247; --accent-tertiary: #5dd3ff; --accent-tertiary-rgb: 93, 211, 255; --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.15); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.15); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.15); --info: #3b82f6; --info-bg: rgba(59, 130, 246, 0.15); --gradient-primary: linear-gradient(135deg, #4a9eff, #a855f7); --gradient-hero: linear-gradient(135deg, #4a9eff 0%, #a855f7 50%, #ec4899 100%); color-scheme: dark; } /* Theme 2 · Aurora (dark, vibrant) */ .theme-aurora { --bg-base: #0f0f14; --bg-elevated: #181823; --text-primary: #faf5ff; --text-secondary: rgba(250, 245, 255, 0.70); --text-tertiary: rgba(250, 245, 255, 0.45); --text-muted: rgba(250, 245, 255, 0.30); --accent-primary: #5ddc8b; --accent-primary-rgb: 93, 220, 139; --accent-secondary: #a855f7; --accent-secondary-rgb: 168, 85, 247; --accent-tertiary: #ec4899; --accent-tertiary-rgb: 236, 72, 153; --success: #5ddc8b; --success-bg: rgba(93, 220, 139, 0.18); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.18); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.18); --info: #a855f7; --info-bg: rgba(168, 85, 247, 0.18); --gradient-primary: linear-gradient(135deg, #5ddc8b, #a855f7); --gradient-hero: linear-gradient(135deg, #5ddc8b 0%, #a855f7 40%, #ec4899 100%); color-scheme: dark; } /* Theme 3 · Peach (light, warm) */ .theme-peach { --bg-base: #fef5e7; --bg-elevated: #ffffff; --text-primary: #1a1614; --text-secondary: rgba(26, 22, 20, 0.72); --text-tertiary: rgba(26, 22, 20, 0.50); --text-muted: rgba(26, 22, 20, 0.35); --accent-primary: #ff6b47; --accent-primary-rgb: 255, 107, 71; --accent-secondary: #ff9a76; --accent-secondary-rgb: 255, 154, 118; --accent-tertiary: #ffcba4; --accent-tertiary-rgb: 255, 203, 164; --success: #059669; --success-bg: rgba(5, 150, 105, 0.12); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.12); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.12); --info: #2563eb; --info-bg: rgba(37, 99, 235, 0.12); --gradient-primary: linear-gradient(135deg, #ff6b47, #ff9a76); --gradient-hero: linear-gradient(135deg, #ff6b47 0%, #ff9a76 50%, #ffcba4 100%); color-scheme: light; } .theme-peach.style-liquid, .theme-peach.style-classic, .theme-peach.style-mix { --glass-bg: rgba(255, 255, 255, 0.45); --glass-bg-hover: rgba(255, 255, 255, 0.60); --glass-bg-strong: rgba(255, 255, 255, 0.75); --glass-border: rgba(26, 22, 20, 0.08); } /* Theme 4 · Mist (light, cool) */ .theme-mist { --bg-base: #f0f4f8; --bg-elevated: #ffffff; --text-primary: #0f172a; --text-secondary: rgba(15, 23, 42, 0.72); --text-tertiary: rgba(15, 23, 42, 0.48); --text-muted: rgba(15, 23, 42, 0.32); --accent-primary: #10b981; --accent-primary-rgb: 16, 185, 129; --accent-secondary: #3b82f6; --accent-secondary-rgb: 59, 130, 246; --accent-tertiary: #8b5cf6; --accent-tertiary-rgb: 139, 92, 246; --success: #10b981; --success-bg: rgba(16, 185, 129, 0.12); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.12); --info: #3b82f6; --info-bg: rgba(59, 130, 246, 0.12); --gradient-primary: linear-gradient(135deg, #10b981, #3b82f6); --gradient-hero: linear-gradient(135deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%); color-scheme: light; } .theme-mist.style-liquid, .theme-mist.style-classic, .theme-mist.style-mix { --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-hover: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.88); --glass-border: rgba(15, 23, 42, 0.08); }