/* BlockTalk design tokens — mirrors det.land's system so the Studio reads as a sibling app. Components reference tokens, never raw values. Two registers: • Studio surfaces use the dark semantic colors below (det.land register). • Respondent surfaces are branded — set --accent at runtime per survey. */ :root { /* Spacing — 4px base grid (det.land scale) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 48px; /* Radius — tight/crisp, not rounded */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* Shadow */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.22); /* Motion */ --motion-fast: 0.15s; --motion-base: 0.25s; /* Z-index layers (named, per det.land convention) */ --z-floating: 950; --z-panel: 1000; --z-header: 1001; --z-overlay: 1100; /* Typography */ --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Semantic colors — Studio dark default */ --color-bg: #0f1115; --color-surface: #171a21; --color-surface-2: #1f232c; --color-border: #2a2f3a; --color-text: #e8eaed; --color-muted: #9aa0a6; /* Accent — Studio default; respondent surfaces override per survey brand */ --accent: #4f8cff; --accent-contrast: #ffffff; } /* Respondent surface: light, friendly, brandable. Set on for /s/{slug}. */ body.respondent { --color-bg: #ffffff; --color-surface: #f6f7f9; --color-surface-2: #eef0f3; --color-border: #dfe3e8; --color-text: #171a21; --color-muted: #5f6570; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--color-bg); color: var(--color-text); } /* Loading spinner — shared by both surfaces (uses --accent + --color-border). */ .loading { display: grid; place-items: center; min-height: 60vh; width: 100%; } .spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--color-border, #2a2f3a); border-top-color: var(--accent, #4f8cff); animation: bt-spin 0.7s linear infinite; } @keyframes bt-spin { to { transform: rotate(360deg); } }