/* ========================================================================= Ghost-style assistant · Design tokens (glass v2 · Apple-style materials) One accent (system blue). Status colours only for state. 8pt spacing. Surfaces are translucent "materials" over a soft ambient wallpaper: thick → sidebar, drawers, composer (most opaque, most blur) regular → cards, bubbles (default) thin → rows / panels nested in a card (no own blur, just a clearer fill) notify → notification-centre toast (brightest, heaviest blur) ========================================================================= */ @font-face { font-family: "InterVariable"; src: url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } :root { color-scheme: light; /* type — Apple system first (SF Pro + PingFang on Mac/iPhone), Inter + Noto elsewhere */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "InterVariable", "Inter", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; --fs-display: 44px; --fs-title: 15.5px; --fs-body: 14.5px; --fs-chat: 15px; --fs-meta: 12.5px; --fs-micro: 11.5px; --lh: 1.55; --lh-tight: 1.3; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* radii — large, continuous */ --r-card: 22px; --r-inner: 14px; --r-ctl: 12px; --r-chip: 999px; /* ambient wallpaper (glass only reads over colour) */ --bg: #EEF1F7; /* solid fallback / reduced transparency */ --bg-sunken: #E6E9F1; --ambient: radial-gradient(38% 48% at 6% 10%, rgba(116, 165, 255, .62) 0%, rgba(116, 165, 255, 0) 70%), radial-gradient(34% 44% at 96% 4%, rgba(196, 162, 255, .55) 0%, rgba(196, 162, 255, 0) 70%), radial-gradient(36% 46% at 64% 44%, rgba(150, 188, 255, .52) 0%, rgba(150, 188, 255, 0) 70%), radial-gradient(32% 40% at 44% 78%, rgba(255, 200, 220, .40) 0%, rgba(255, 200, 220, 0) 70%), radial-gradient(40% 50% at 92% 96%, rgba(255, 186, 150, .60) 0%, rgba(255, 186, 150, 0) 70%), radial-gradient(38% 48% at 22% 98%, rgba(118, 214, 198, .50) 0%, rgba(118, 214, 198, 0) 70%), radial-gradient(30% 40% at 36% 28%, rgba(226, 206, 255, .50) 0%, rgba(226, 206, 255, 0) 70%), linear-gradient(140deg, #E7EDFA 0%, #EFEDF8 48%, #F6EFEB 100%); --wallpaper-phone: radial-gradient(85% 42% at 0% 0%, rgba(108, 158, 255, .66) 0%, rgba(108, 158, 255, 0) 70%), radial-gradient(75% 38% at 100% 20%, rgba(194, 158, 255, .58) 0%, rgba(194, 158, 255, 0) 70%), radial-gradient(70% 30% at 38% 52%, rgba(226, 204, 255, .45) 0%, rgba(226, 204, 255, 0) 70%), radial-gradient(85% 40% at 100% 88%, rgba(255, 178, 140, .62) 0%, rgba(255, 178, 140, 0) 70%), radial-gradient(85% 42% at 0% 100%, rgba(104, 208, 192, .56) 0%, rgba(104, 208, 192, 0) 70%), linear-gradient(165deg, #E3EAFA 0%, #EFEBF8 50%, #F7EDE8 100%); /* opaque surfaces (used where something must fully cover a line, e.g. timeline dots) */ --surface: #FFFFFF; --surface-2: rgba(255, 255, 255, .55); --surface-3: rgba(120, 128, 150, .12); /* iOS "fill" — tracks, neutral pills */ /* materials */ --mat-thick: rgba(246, 248, 252, .64); --mat-regular: rgba(255, 255, 255, .56); --mat-thin: rgba(255, 255, 255, .50); --mat-notify: rgba(250, 251, 253, .66); --mat-blur: blur(30px) saturate(180%); --mat-blur-thick: blur(40px) saturate(185%); --mat-blur-notify: blur(50px) saturate(200%); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 34%); --rim: linear-gradient(165deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .55) 22%, rgba(255, 255, 255, .12) 52%, rgba(255, 255, 255, .45) 100%); --hairline: rgba(36, 44, 72, .09); /* outer edge so glass separates from pale areas */ --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .85); /* labels (checked ≥ 4.5:1 on regular glass over the brightest/darkest wallpaper spots) */ --text: #111216; --text-2: #43464E; --text-3: #5C5F68; --text-4: #7A7D86; /* disabled / not-yet states only */ --line: rgba(30, 38, 64, .08); --line-strong: rgba(30, 38, 64, .14); --accent: #007AFF; --accent-hover: #0A6CEB; --accent-text: #0058C7; --accent-soft: rgba(0, 122, 255, .10); --accent-soft-2: rgba(0, 122, 255, .18); --accent-grad: linear-gradient(180deg, #1F88FA 0%, #006BE0 55%, #0061CE 100%); /* white label ≥ 4.5:1 */ --accent-glow: 0 6px 16px -6px rgba(0, 122, 255, .55); --on-accent: #FFFFFF; --ok: #13733B; --ok-fill: #34C759; --ok-soft: rgba(52, 199, 89, .14); --warn: #8F4F00; --warn-soft: rgba(255, 149, 0, .15); --danger: #B81D27; --danger-fill: #FF3B30; --danger-soft: rgba(255, 59, 48, .11); /* elevation — soft, tinted, layered */ --shadow-card: 0 0 0 .5px var(--hairline), 0 1px 2px rgba(30, 40, 80, .05), 0 10px 28px -10px rgba(40, 56, 110, .16), 0 28px 56px -32px rgba(40, 56, 110, .22); --shadow-raise: 0 0 0 .5px var(--hairline), 0 2px 6px rgba(30, 40, 80, .06), 0 18px 40px -16px rgba(40, 56, 110, .26); --shadow-float: 0 0 0 .5px rgba(36, 44, 72, .10), 0 8px 20px -8px rgba(30, 40, 80, .16), 0 32px 70px -24px rgba(30, 40, 80, .34); --shadow-btn: 0 1px 2px rgba(30, 40, 80, .08); /* controls on glass */ --ctl-fill: rgba(255, 255, 255, .62); --ctl-fill-hover: rgba(255, 255, 255, .82); --field-fill: rgba(255, 255, 255, .50); --inset-fill: rgba(255, 255, 255, .50); --seg-on: #FFFFFF; --pill-base: rgba(255, 255, 255, .72); --sel-fill: rgba(255, 255, 255, .78); /* selected sidebar / tab item */ --edge-tint: rgba(236, 240, 248, .55); /* scroll-edge blur under toolbars */ --hud-bg: rgba(28, 30, 38, .74); --hud-text: #FFFFFF; /* legacy aliases (notification glass) */ --glass-bg: var(--mat-notify); --glass-ring: rgba(255, 255, 255, .7); --glass-edge: rgba(36, 44, 72, .08); --glass-blur: var(--mat-blur-notify); /* motion */ --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); --t-fast: 150ms; --t-base: 200ms; --t-slow: 260ms; } [data-theme="dark"] { color-scheme: dark; --bg: #0C0E15; --bg-sunken: #08090E; --ambient: radial-gradient(38% 48% at 6% 10%, rgba(38, 92, 230, .50) 0%, rgba(38, 92, 230, 0) 70%), radial-gradient(34% 44% at 96% 4%, rgba(126, 64, 214, .42) 0%, rgba(126, 64, 214, 0) 70%), radial-gradient(36% 46% at 64% 46%, rgba(40, 80, 190, .26) 0%, rgba(40, 80, 190, 0) 70%), radial-gradient(40% 50% at 92% 96%, rgba(214, 96, 52, .30) 0%, rgba(214, 96, 52, 0) 70%), radial-gradient(38% 48% at 22% 98%, rgba(16, 150, 136, .34) 0%, rgba(16, 150, 136, 0) 70%), radial-gradient(30% 40% at 38% 30%, rgba(170, 60, 140, .16) 0%, rgba(170, 60, 140, 0) 70%), linear-gradient(140deg, #0A0E1C 0%, #0D0B18 48%, #140E10 100%); --wallpaper-phone: radial-gradient(85% 42% at 0% 0%, rgba(40, 92, 232, .58) 0%, rgba(40, 92, 232, 0) 70%), radial-gradient(75% 38% at 100% 20%, rgba(128, 62, 214, .50) 0%, rgba(128, 62, 214, 0) 70%), radial-gradient(70% 30% at 38% 52%, rgba(60, 70, 190, .26) 0%, rgba(60, 70, 190, 0) 70%), radial-gradient(85% 40% at 100% 88%, rgba(214, 96, 50, .38) 0%, rgba(214, 96, 50, 0) 70%), radial-gradient(85% 42% at 0% 100%, rgba(14, 150, 134, .42) 0%, rgba(14, 150, 134, 0) 70%), linear-gradient(165deg, #0B1022 0%, #0E0B1A 50%, #160E10 100%); --surface: #2A2C35; --surface-2: rgba(255, 255, 255, .055); --surface-3: rgba(200, 210, 255, .10); --mat-thick: rgba(26, 28, 36, .62); --mat-regular: rgba(36, 38, 48, .50); --mat-thin: rgba(255, 255, 255, .055); --mat-notify: rgba(44, 46, 56, .56); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 34%); --rim: linear-gradient(165deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .12) 24%, rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .10) 100%); --hairline: rgba(0, 0, 0, .55); --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .10); --text: #F3F4F7; --text-2: #BEC1CA; --text-3: #A3A7B2; --text-4: #80848F; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .14); --accent: #0A84FF; --accent-hover: #3A9BFF; --accent-text: #7CBDFF; --accent-soft: rgba(10, 132, 255, .18); --accent-soft-2: rgba(10, 132, 255, .30); --accent-grad: linear-gradient(180deg, #2A90FF 0%, #006BE0 55%, #0062D0 100%); --accent-glow: 0 6px 18px -6px rgba(10, 132, 255, .65); --ok: #4CD964; --ok-fill: #30D158; --ok-soft: rgba(48, 209, 88, .16); --warn: #FFB340; --warn-soft: rgba(255, 159, 10, .16); --danger: #FF8C85; --danger-fill: #FF453A; --danger-soft: rgba(255, 69, 58, .16); --shadow-card: 0 0 0 .5px var(--hairline), 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -12px rgba(0, 0, 0, .55), 0 30px 60px -30px rgba(0, 0, 0, .6); --shadow-raise: 0 0 0 .5px var(--hairline), 0 2px 6px rgba(0, 0, 0, .4), 0 20px 44px -16px rgba(0, 0, 0, .7); --shadow-float: 0 0 0 .5px rgba(0, 0, 0, .6), 0 10px 22px -8px rgba(0, 0, 0, .5), 0 34px 72px -22px rgba(0, 0, 0, .8); --shadow-btn: 0 1px 2px rgba(0, 0, 0, .4); --ctl-fill: rgba(255, 255, 255, .09); --ctl-fill-hover: rgba(255, 255, 255, .15); --field-fill: rgba(0, 0, 0, .20); --inset-fill: rgba(255, 255, 255, .05); --seg-on: rgba(255, 255, 255, .18); --pill-base: rgba(255, 255, 255, .06); --sel-fill: rgba(255, 255, 255, .12); --edge-tint: rgba(12, 14, 22, .50); --hud-bg: rgba(58, 60, 70, .72); --hud-text: #FFFFFF; --glass-ring: rgba(255, 255, 255, .10); --glass-edge: rgba(0, 0, 0, .5); } /* ---------- solid fallback: no backdrop-filter, or "Reduce transparency" is on ---------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --mat-thick: #F3F5F9; --mat-regular: #FFFFFF; --mat-thin: #F6F7FA; --mat-notify: #FFFFFF; --ctl-fill: #F2F3F7; --inset-fill: #F6F7FA; --field-fill: #F4F5F8; --edge-tint: #EEF1F7; } [data-theme="dark"] { --mat-thick: #181A21; --mat-regular: #20222A; --mat-thin: #262830; --mat-notify: #262830; --ctl-fill: #2C2E37; --inset-fill: #262830; --field-fill: #1A1C22; --edge-tint: #0C0E15; } } @media (prefers-reduced-transparency: reduce) { :root { --mat-thick: #F3F5F9; --mat-regular: #FFFFFF; --mat-thin: #F6F7FA; --mat-notify: #FFFFFF; --ctl-fill: #F2F3F7; --inset-fill: #F6F7FA; --field-fill: #F4F5F8; --edge-tint: #EEF1F7; --mat-blur: none; --mat-blur-thick: none; --mat-blur-notify: none; --sheen: none; } [data-theme="dark"] { --mat-thick: #181A21; --mat-regular: #20222A; --mat-thin: #262830; --mat-notify: #262830; --ctl-fill: #2C2E37; --inset-fill: #262830; --field-fill: #1A1C22; --edge-tint: #0C0E15; } }