/* ========================================================================== Fidian demo — shared design system (mocks only, no real backend) Dark "platform" tokens pulled from ts/platform globals.css. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root { /* platform tokens (from globals.css) */ --deep-bg: #0d0614; --bg: #120b1c; --panel: #1a1322; --panel-2: #211e29; --gray-dark: #211e29; --gray-medium: #44444d; --border: #2a2333; --border-strong: #3a3343; --pass: #5ce58a; --fail: #e64560; --warn: #f5b14c; --diff-add-bg: #131c1d; --diff-del-bg: #210c19; --diff-add-fg: #5ce58a; --diff-del-fg: #e64560; --accent: #2dd4bf; /* teal ≈ oklch(0.60 0.10 185) */ --accent-dim: #15a99a; --accent-glow: rgba(45, 212, 191, 0.18); --violet: #a78bfa; --text: #ece9f3; --text-muted: #9a93a8; --text-faint: #6b6478; --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 0 1px var(--accent-glow), 0 12px 40px -10px var(--accent-glow); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font-sans); background: radial-gradient(1200px 700px at 80% -10%, rgba(45, 212, 191, 0.07), transparent 60%), radial-gradient(900px 600px at 0% 110%, rgba(167, 139, 250, 0.07), transparent 55%), var(--deep-bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; } /* ---- THEME: conceptual architecture (lighter Fidian purple) ------------- */ body.arch { --deep-bg: #1c1340; --bg: #221748; --panel: #2a1d54; --panel-2: #332463; --gray-dark: #2a1d54; --border: #463576; --border-strong: #5a4690; --text: #efeafc; --text-muted: #b6abdc; --text-faint: #8b7fb8; --shadow-glow: 0 0 0 1px rgba(167,139,250,0.25), 0 12px 40px -10px rgba(167,139,250,0.25); background: radial-gradient(1100px 700px at 78% -12%, rgba(167, 139, 250, 0.20), transparent 60%), radial-gradient(900px 650px at 8% 112%, rgba(45, 212, 191, 0.12), transparent 58%), linear-gradient(180deg, #221748, #1a1138 60%, #160f31); } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-glow); } /* ---- top brand bar ------------------------------------------------------- */ .topbar { height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid var(--border); background: rgba(13, 6, 20, 0.7); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 30; } .brand { display: flex; align-items: center; } /* Brand = the full Fidian wordmark SVG (matches the platform's fidian-wordmark.svg), rendered light against the dark bar. */ .brand .logo { height: 19px; width: auto; display: block; color: var(--text); } .crumbs { color: var(--text-faint); font-size: 13px; display: flex; gap: 8px; align-items: center; } .crumbs b { color: var(--text-muted); font-weight: 500; } .topbar .spacer { flex: 1; } .topbar .pill { font-size: 12px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; display: flex; gap: 7px; align-items: center; } /* ---- left nav rail (matches the platform sidebar) ------------------------ */ /* Fixed 56px rail on the left; pages opt in with and a