/* Palette tokens that don't flip on theme change — moved from @theme * to :root so plain CSS works without the Tailwind v4 preprocessor. * Colors that flip per theme live in the theme-scoped :root blocks * below. */ :root { --color-warn: #ffb86b; --color-warm: #d29b64; /* bronze/gold — used in orb + accents */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ============================================================== * Theme system — Sprint 0 scaffold (v0.22.11 web) * * The element carries a `data-theme` attribute set to * "light" | "dark" by the ThemeProvider on mount + on system * preference change. CSS below defines both palettes with the * dark one as the default (matches historical behaviour + used * when data-theme is absent). * * @theme block above owns tokens that do NOT flip. :root below * defines the flipping tokens. * ============================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --color-ink: #07080b; /* deepest surface / page background */ --color-ink-2: #0d0e15; /* card surface */ --color-ink-3: #181a25; /* elevated surface */ --color-bone: #ececf1; /* primary text */ --color-bone-2: #c9c9d6; /* secondary text */ --color-bone-3: #888894; /* muted text / captions */ --color-pulse: #7c5cff; /* brand purple — bright on dark */ --color-pulse-2: #6ec4e8; /* brand cyan — bright on dark */ --hairline: rgba(255, 255, 255, 0.06); --hairline-2: rgba(255, 255, 255, 0.10); --hairline-strong: rgba(255, 255, 255, 0.14); /* Chrome + surfaces that need semi-transparent panels the theme * flips (Nav backdrop, card fills, hover tints). */ --nav-bg: rgba(7, 8, 11, 0.55); --surface: rgba(255, 255, 255, 0.015); --surface-2: rgba(255, 255, 255, 0.03); --surface-3: rgba(255, 255, 255, 0.05); --surface-hover: rgba(255, 255, 255, 0.04); /* Accent tokens for tinted surfaces (badge fills, active states) */ --pulse-tint: rgba(124, 92, 255, 0.07); --pulse-tint-2: rgba(124, 92, 255, 0.14); --pulse-border: rgba(124, 92, 255, 0.35); --pulse-2-tint: rgba(110, 196, 232, 0.08); --pulse-2-border: rgba(110, 196, 232, 0.40); --shadow-pulse: 0 16px 40px -16px rgba(190, 118, 255, 0.4), 0 4px 14px -4px rgba(0, 0, 0, 0.6); /* Decorative artifacts — flipped for theme */ --orb-gradient: radial-gradient( circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(230, 210, 255, 0.55) 22%, rgba(210, 155, 100, 0.75) 52%, rgba(155, 118, 220, 0.90) 82%, rgba(90, 62, 160, 0.98) 100% ); --orb-glow: 0 0 40px rgba(189, 158, 255, 0.30), 0 0 12px rgba(189, 158, 255, 0.55); --orb-lg-wash: radial-gradient(60% 60% at 50% 50%, rgba(124, 92, 255, 0.22), transparent 65%), radial-gradient(40% 40% at 65% 55%, rgba(110, 196, 232, 0.14), transparent 70%); --grid-line: rgba(255, 255, 255, 0.045); --grid-line-strong: rgba(255, 255, 255, 0.08); /* Accent text — accents readable ON the current background. * Dark = the bright brand hues. Light = a slightly darker version * so contrast against a light bg passes AAA. */ --accent-text: #bd9eff; --accent-text-2: #6ec4e8; --shadow-card: 0 4px 24px -8px rgba(0, 0, 0, 0.5); /* Dashboard surface tokens — the workspace shell needs several * distinct ground levels (canvas / card / panel / scrim). Panel * grounds MUST be fully opaque; they were previously alpha-based * on the assumption backdrop-filter on the same element would * frost them, but the blur lives on the scrim parent so the * alpha leaked whatever was behind on every render. */ --workspace-canvas: #0a0b0e; --card-elev: rgba(13, 14, 21, 0.55); --card-elev-strong: rgba(13, 14, 21, 0.85); --panel-bg: #0b0c12; --panel-bg-strong: #0b0c12; --overlay-scrim: rgba(8, 6, 20, 0.62); --overlay-scrim-soft: rgba(8, 6, 20, 0.55); /* Gradient wash on that varies by theme */ --body-wash: radial-gradient(1400px 900px at 50% -10%, rgba(124, 92, 255, 0.10), transparent 60%), radial-gradient(1100px 700px at 100% 110%, rgba(74, 214, 255, 0.06), transparent 60%); } /* Light mode requires a broader override set — surfaces need to be * TINTED (not translucent white on white), accents darkened for * contrast, and borders visible instead of near-invisible. */ :root[data-theme="light"], :root:not([data-theme]) { color-scheme: light; /* Slightly warm, subtly purple-tinted whites so pure-white cards * pop against the page instead of dissolving into it. */ --color-ink: #f6f5fa; --color-ink-2: #ffffff; --color-ink-3: #eeecf5; --color-bone: #14151a; --color-bone-2: #3a3b46; --color-bone-3: #6d6e78; /* Brand accents darkened for legibility on light ground. */ --color-pulse: #5834d8; --color-pulse-2: #2570a0; --hairline: rgba(20, 21, 26, 0.14); --hairline-2: rgba(20, 21, 26, 0.22); --hairline-strong: rgba(20, 21, 26, 0.34); --nav-bg: rgba(255, 255, 255, 0.78); --surface: rgba(20, 21, 26, 0.03); --surface-2: rgba(20, 21, 26, 0.05); --surface-3: rgba(20, 21, 26, 0.07); --surface-hover: rgba(20, 21, 26, 0.04); --pulse-tint: rgba(88, 60, 220, 0.08); --pulse-tint-2: rgba(88, 60, 220, 0.16); --pulse-border: rgba(88, 60, 220, 0.42); --pulse-2-tint: rgba(38, 130, 180, 0.10); --pulse-2-border: rgba(38, 130, 180, 0.45); --accent-text: #5834d8; --accent-text-2: #2570a0; --shadow-card: 0 1px 2px rgba(20, 21, 26, 0.04), 0 8px 24px -10px rgba(88, 60, 220, 0.14), 0 22px 48px -22px rgba(20, 21, 26, 0.18); --shadow-pulse: 0 18px 44px -18px rgba(88, 60, 220, 0.38), 0 6px 16px -6px rgba(20, 21, 26, 0.14); /* Dashboard surface tokens — light-mode equivalents. Panels are * fully opaque white; scrim is a dark tint so the backdrop still * reads as an overlay against a light ground. */ --workspace-canvas: #f2f2f5; --card-elev: rgba(255, 255, 255, 0.70); --card-elev-strong: rgba(255, 255, 255, 0.92); --panel-bg: #ffffff; --panel-bg-strong: #ffffff; --overlay-scrim: rgba(30, 24, 60, 0.32); --overlay-scrim-soft: rgba(30, 24, 60, 0.24); --body-wash: radial-gradient(1400px 900px at 50% -10%, rgba(88, 60, 220, 0.10), transparent 60%), radial-gradient(1100px 700px at 100% 110%, rgba(38, 130, 180, 0.07), transparent 60%), radial-gradient(700px 500px at 0% 45%, rgba(210, 155, 100, 0.05), transparent 60%); /* Decorative artifacts — light-mode tuning. */ --orb-gradient: radial-gradient( circle at 32% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(232, 220, 255, 0.85) 20%, rgba(210, 155, 100, 0.65) 50%, rgba(120, 80, 220, 0.75) 82%, rgba(58, 34, 140, 0.90) 100% ); --orb-glow: 0 8px 34px rgba(88, 60, 220, 0.28), 0 2px 10px rgba(88, 60, 220, 0.20); --orb-lg-wash: radial-gradient(60% 60% at 50% 50%, rgba(88, 60, 220, 0.18), transparent 65%), radial-gradient(40% 40% at 65% 55%, rgba(210, 155, 100, 0.14), transparent 70%); --grid-line: rgba(20, 21, 26, 0.06); --grid-line-strong: rgba(20, 21, 26, 0.10); } /* Dark override only when both prefers-color-scheme=dark AND * data-theme is not set (respects system dark) — keeps dark values * from above. Media query only overrides when user is on light OS * WITHOUT an explicit choice. Handled by the :not([data-theme]) * inheriting the light block above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-ink: #07080b; --color-ink-2: #0d0e15; --color-ink-3: #181a25; --color-bone: #ececf1; --color-bone-2: #c9c9d6; --color-bone-3: #888894; --color-pulse: #7c5cff; --color-pulse-2: #6ec4e8; --hairline: rgba(255, 255, 255, 0.06); --hairline-2: rgba(255, 255, 255, 0.10); --hairline-strong: rgba(255, 255, 255, 0.14); --nav-bg: rgba(7, 8, 11, 0.55); --surface: rgba(255, 255, 255, 0.015); --surface-2: rgba(255, 255, 255, 0.03); --surface-3: rgba(255, 255, 255, 0.05); --surface-hover: rgba(255, 255, 255, 0.04); --pulse-tint: rgba(124, 92, 255, 0.07); --pulse-tint-2: rgba(124, 92, 255, 0.14); --pulse-border: rgba(124, 92, 255, 0.35); --pulse-2-tint: rgba(110, 196, 232, 0.08); --pulse-2-border: rgba(110, 196, 232, 0.40); --accent-text: #bd9eff; --accent-text-2: #6ec4e8; --shadow-card: 0 4px 24px -8px rgba(0, 0, 0, 0.5); --shadow-pulse: 0 16px 40px -16px rgba(190, 118, 255, 0.4), 0 4px 14px -4px rgba(0, 0, 0, 0.6); --workspace-canvas: #0a0b0e; --card-elev: rgba(13, 14, 21, 0.55); --card-elev-strong: rgba(13, 14, 21, 0.85); --panel-bg: #0b0c12; --panel-bg-strong: #0b0c12; --overlay-scrim: rgba(8, 6, 20, 0.62); --overlay-scrim-soft: rgba(8, 6, 20, 0.55); --body-wash: radial-gradient(1400px 900px at 50% -10%, rgba(124, 92, 255, 0.10), transparent 60%), radial-gradient(1100px 700px at 100% 110%, rgba(74, 214, 255, 0.06), transparent 60%); --orb-gradient: radial-gradient( circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(230, 210, 255, 0.55) 22%, rgba(210, 155, 100, 0.75) 52%, rgba(155, 118, 220, 0.90) 82%, rgba(90, 62, 160, 0.98) 100% ); --orb-glow: 0 0 40px rgba(189, 158, 255, 0.30), 0 0 12px rgba(189, 158, 255, 0.55); --orb-lg-wash: radial-gradient(60% 60% at 50% 50%, rgba(124, 92, 255, 0.22), transparent 65%), radial-gradient(40% 40% at 65% 55%, rgba(110, 196, 232, 0.14), transparent 70%); --grid-line: rgba(255, 255, 255, 0.045); --grid-line-strong: rgba(255, 255, 255, 0.08); } } html, body { margin: 0; padding: 0; background: var(--color-ink); color: var(--color-bone-2); font-family: var(--font-sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100%; overflow-x: hidden; transition: background-color 0.28s ease, color 0.28s ease; } body { background: var(--body-wash), var(--color-ink); } ::selection { background: rgba(124, 92, 255, 0.35); color: var(--color-bone); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(180, 180, 200, 0.12); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(180, 180, 200, 0.28); } * { scrollbar-width: thin; scrollbar-color: rgba(180, 180, 200, 0.2) transparent; } /* ── shared section header treatment ── */ .section-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-bone-3); } .section-title { margin: 12px 0 0; font-size: clamp(28px, 4.4vw, 44px); font-weight: 200; letter-spacing: -0.025em; line-height: 1.1; color: var(--color-bone); } .section-lede { margin: 18px 0 0; max-width: 600px; font-size: 16px; line-height: 1.6; color: var(--color-bone-3); } .hairline { border-color: var(--hairline); } /* ── semantic utility classes for theme-aware components ── * Use these in JSX/Astro instead of hardcoded `text-white/45` etc. * They flip cleanly on data-theme change. Named after semantic role, * not visual value, so they read cleanly. */ .text-fg { color: var(--color-bone); } .text-fg-2 { color: var(--color-bone-2); } .text-fg-3 { color: var(--color-bone-3); } .text-muted { color: color-mix(in srgb, var(--color-bone-3) 75%, transparent); } .text-muted-2 { color: color-mix(in srgb, var(--color-bone-3) 55%, transparent); } .text-accent { color: var(--accent-text); } .text-accent-2 { color: var(--accent-text-2); } .bg-app { background-color: var(--color-ink); } .bg-surface { background-color: var(--surface); } .bg-surface-2 { background-color: var(--surface-2); } .bg-surface-3 { background-color: var(--surface-3); } .bg-surface-hover:hover { background-color: var(--surface-hover); } .bg-pulse-tint { background-color: var(--pulse-tint); } .border-line { border-color: var(--hairline); } .border-line-2 { border-color: var(--hairline-2); } .border-line-strong { border-color: var(--hairline-strong); } .border-pulse { border-color: var(--pulse-border); } .placeholder-muted::placeholder { color: color-mix(in srgb, var(--color-bone-3) 55%, transparent); } /* ── ambient grid pattern (used as overlay in some sections) ── */ .grid-bg { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } /* ── Orb + grid decorative primitives ── * Reusable across sections to keep the mercury/pulse orb + grid * texture consistent everywhere. All theme-token driven so light * and dark stay coherent. */ .orb { width: 24px; height: 24px; border-radius: 50%; background: var(--orb-gradient); box-shadow: var(--orb-glow); display: inline-block; flex-shrink: 0; } .orb-sm { width: 14px; height: 14px; } .orb-md { width: 34px; height: 34px; } .orb-xl { width: 56px; height: 56px; } /* Ambient glow blob — position absolute inside a positioned parent. * Sizing/position via inline style at call site. Purely decorative. */ .orb-ambient { position: absolute; border-radius: 50%; background: var(--orb-lg-wash); filter: blur(28px); pointer-events: none; opacity: 0.9; } /* Fine grid texture — masked to feather at edges. Position absolute * inside a positioned parent, size via inline style or classes. */ .grid-tex { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); pointer-events: none; z-index: 0; } .grid-tex-fine { background-size: 24px 24px; } .grid-tex-strong { background-image: linear-gradient(var(--grid-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px); } /* ── orb animations (lifted from landing, refined) ── */ @keyframes orb-hue { to { filter: saturate(1.2) hue-rotate(360deg); } } @keyframes orb-rotate { to { transform: rotate(360deg); } } @keyframes aura-pulse { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.72; transform: scale(1.04); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } } /* ── prose styling for legal pages ── */ .prose-legal { max-width: 760px; margin: 0 auto; color: var(--color-bone-2); font-size: 15px; line-height: 1.7; } .prose-legal h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 200; letter-spacing: -0.03em; color: var(--color-bone); margin: 0 0 8px; } .prose-legal h2 { margin: 48px 0 14px; font-size: 20px; font-weight: 500; letter-spacing: -0.005em; color: var(--color-bone); } .prose-legal h3 { margin: 28px 0 10px; font-size: 15px; font-weight: 500; color: var(--color-bone); } .prose-legal p { margin: 12px 0; } .prose-legal a { color: var(--color-pulse-2); text-decoration: underline; text-decoration-color: rgba(110, 196, 232, 0.4); text-underline-offset: 3px; } .prose-legal a:hover { color: var(--color-bone); text-decoration-color: var(--color-bone-3); } .prose-legal ul, .prose-legal ol { margin: 14px 0; padding-left: 22px; } .prose-legal li { margin: 6px 0; } .prose-legal code { background: rgba(255, 255, 255, 0.05); border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); font-size: 13px; color: var(--color-bone); } .prose-legal hr { border: 0; height: 1px; background: var(--hairline); margin: 40px 0; } .prose-legal strong { color: var(--color-bone); } .prose-legal blockquote { margin: 18px 0; padding: 14px 18px; border-left: 2px solid var(--color-pulse); background: rgba(124, 92, 255, 0.04); border-radius: 4px; color: var(--color-bone-2); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ============================================================== * .astro component styles — consolidated here because Astro's * Vite pipeline silently fails to emit