/* Theme contract: components and SVG scenes consume these semantic tokens. */
:root {
 color-scheme: light;
 --paper: #f7f6f3; --surface: #ffffff; --surface-alt: #f0f0eb;
 --ink: #161815; --quiet: #62685f; --line: #dcded5;
 --orange: #ff5b32; --action: #c43d1d; --action-hover: #a83016; --on-action: #ffffff;
 --violet: #4824c8; --green: #087d61; --amber: #986014; --red: #be4038;
 --focus: #4824c8;
 --sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 --display: Archivo, var(--sans); --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
 --font-sans: var(--sans); --font-display: var(--display); --font-mono: var(--mono);
 --bg-primary: var(--paper); --quiet-ink: var(--quiet);
 --role-product: #3b82f6; --role-architect: #8b5cf6; --role-frontend: #d83586; --role-backend: #087d61; --role-qa: #986014; --role-security: #be4038; --role-devops: #087e99;
 --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-5: 20px; --space-10: 40px;
 --radius-control: 8px; --radius-card: 16px; --radius-scene: 24px;
 --text-body: 14px; --text-small: 12px; --text-heading: 23px;
 --shadow: 0 8px 30px color-mix(in srgb, var(--ink) 3%, transparent);
 --shadow-sm: 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent);
 --shadow-dialog: 0 24px 64px color-mix(in srgb, var(--ink) 18%, transparent);
}
:root[data-theme="dark"] {
 color-scheme: dark;
 --role-product: #82b2ff; --role-architect: #b6a1ff; --role-frontend: #ff92c8; --role-backend: #60d9b1; --role-qa: #efc16c; --role-security: #ff9d94; --role-devops: #69cbe2;
 --paper: #171915; --surface: #20241e; --surface-alt: #292e26;
 --ink: #f2f3ec; --quiet: #b6bdae; --line: #444c3d;
 --orange: #ff8d6b; --action: #ff8d6b; --action-hover: #ffad95; --on-action: #24130e;
 --violet: #b6a1ff; --green: #60d9b1; --amber: #efc16c; --red: #ff9d94; --focus: #b6a1ff;
}