/* Brunx Design System — generated from tokens.json */
:root,[data-theme="light"]{
--brunx-black:#1a1a1a;
--petrol:#123042;
--royal:#4a5fde;
--gray-0:#ffffff;
--gray-50:#fafafa;
--gray-75:#f7f7f7;
--gray-100:#f1f1f1;
--gray-150:#ebebeb;
--gray-200:#e3e3e3;
--gray-300:#cccccc;
--gray-400:#b5b5b5;
--gray-500:#8a8a8a;
--gray-600:#616161;
--gray-800:#303030;
--gray-900:#1a1a1a;
--frame:var(--brunx-black);
--frame-hover:#2a2a2a;
--frame-active:var(--gray-800);
--frame-ink:var(--gray-200);
--frame-muted:var(--gray-400);
--frame-line:#2f2f2f;
--frame-field:var(--gray-800);
--frame-field-border:#3a3a3a;
--bg:var(--gray-100);
--surface:var(--gray-0);
--surface-sunken:var(--gray-75);
--surface-subtle:var(--gray-50);
--surface-raised:var(--gray-0);
--overlay:rgba(0, 0, 0, 0.45);
--ink:var(--gray-800);
--muted:var(--gray-600);
--border:var(--gray-200);
--divider:var(--gray-150);
--border-strong:var(--gray-300);
--control-border:var(--gray-500);
--action:var(--gray-800);
--action-hover:var(--gray-900);
--on-action:var(--gray-0);
--action-soft:var(--gray-100);
--tab-active:var(--gray-200);
--link:#005bd3;
--focus:#005bd3;
--accent:var(--royal);
--selection:#cde0ff;
--success:#0c5132;
--success-soft:#cdfee1;
--warning:#4f4700;
--warning-soft:#ffef9d;
--danger:#8e0b21;
--danger-soft:#fedad9;
--danger-fill:#c70a24;
--info:#00527c;
--info-soft:#e0f0ff;
--neutral-soft:#f0f0f0;
--dot-info:#2f7dff;
--dot-warning:#e5a000;
--dot-danger:#d72c0d;
--avatar:#36d38f;
--avatar-ink:#0b3b24;
--skeleton:var(--gray-200);
--skeleton-shine:var(--gray-100);
--ai-avatar:#050f1c;
--ai-log:#f6f6f7;
--ai-online:#1f9d55;
--public-bg:#05090c;
--public-surface:#0c1419;
--public-ink:var(--gray-0);
--public-muted:rgba(255, 255, 255, 0.6);
--chart-1:#2a78d6;
--chart-2:#eb6834;
--chart-3:#1baf7a;
--chart-4:#eda100;
--chart-5:#e87ba4;
--chart-6:#008300;
--chart-7:#6250d6;
--chart-8:#e34948;
--chart-grid:var(--gray-150);
--shadow-card:0 1px 0 rgba(26, 26, 26, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.06);
--shadow-card-hover:0 1px 0 rgba(26, 26, 26, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.14);
--shadow-btn:0 -1px 0 0 #b5b5b5 inset, 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 0.5px 0 1.5px #ffffff inset;
--shadow-btn-primary:0 -1px 0 1px rgba(0, 0, 0, 0.8) inset, 0 0 0 1px #303030 inset, 0 0.5px 0 1.5px rgba(255, 255, 255, 0.25) inset;
--shadow-btn-danger:0 -1px 0 1px rgba(142, 31, 11, 0.8) inset, 0 0 0 1px #c70a24 inset, 0 0.5px 0 1.5px rgba(255, 255, 255, 0.35) inset;
--shadow-float:0 12px 32px rgba(0, 0, 0, 0.14);
--shadow-modal:0 18px 50px rgba(0, 0, 0, 0.25);
--shadow-launcher:0 6px 22px rgba(0, 0, 0, 0.22);
--shadow-bubble:0 1px 3px rgba(0, 0, 0, 0.07);
}
[data-theme="dark"]{
--frame:#111111;
--frame-hover:#222222;
--frame-active:#2c2c2c;
--frame-ink:#e3e3e3;
--frame-muted:#a3a3a3;
--frame-line:#262626;
--frame-field:#222222;
--frame-field-border:#333333;
--bg:#1c1c1c;
--surface:#262626;
--surface-sunken:#212121;
--surface-subtle:#2b2b2b;
--surface-raised:#2e2e2e;
--overlay:rgba(0, 0, 0, 0.65);
--ink:#e3e3e3;
--muted:#a8a8a8;
--border:#383838;
--divider:#333333;
--border-strong:#4a4a4a;
--control-border:#757575;
--action:#e3e3e3;
--action-hover:#ffffff;
--on-action:#1a1a1a;
--action-soft:#303030;
--tab-active:#3a3a3a;
--link:#7cb4ff;
--focus:#7cb4ff;
--accent:#8b9af0;
--selection:#1f3a66;
--success:#7ee2a8;
--success-soft:#0f3322;
--warning:#f5d76e;
--warning-soft:#3a3200;
--danger:#ff9b9b;
--danger-soft:#451317;
--danger-fill:#c70a24;
--info:#8cc8f2;
--info-soft:#10324a;
--neutral-soft:#333333;
--dot-info:#5c9bff;
--dot-warning:#f0b400;
--dot-danger:#ff6b52;
--avatar:#36d38f;
--avatar-ink:#0b3b24;
--skeleton:#2e2e2e;
--skeleton-shine:#383838;
--ai-avatar:#050f1c;
--ai-log:#1f1f1f;
--ai-online:#3fbf74;
--public-bg:#05090c;
--public-surface:#0c1419;
--public-ink:#ffffff;
--public-muted:rgba(255, 255, 255, 0.6);
--chart-1:#3987e5;
--chart-2:#d95926;
--chart-3:#199e70;
--chart-4:#c98500;
--chart-5:#d55181;
--chart-6:#2f9a2f;
--chart-7:#9085e9;
--chart-8:#e66767;
--chart-grid:#333333;
--shadow-card:0 0 0 1px rgba(255, 255, 255, 0.07);
--shadow-card-hover:0 0 0 1px rgba(255, 255, 255, 0.16);
--shadow-btn:0 -1px 0 0 #111111 inset, 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
--shadow-btn-primary:0 -1px 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 0 1px #e3e3e3 inset;
--shadow-float:0 16px 40px rgba(0, 0, 0, 0.6);
--shadow-modal:0 18px 50px rgba(0, 0, 0, 0.7);
--shadow-bubble:0 0 0 1px rgba(255, 255, 255, 0.06);
}
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-10:40px;
--radius-control:8px;
--radius-item:10px;
--radius-card:12px;
--radius-panel:18px;
--radius-bubble:16px;
--radius-pill:999px;
--radius-app-icon:22%;
--sidebar-width:220px;
--canvas-inset:8px;
--content-max:1400px;
--context-bar-height:52px;
--control-height:32px;
--breakpoint-mobile:1024px;
--font-sans:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono:ui-monospace, SFMono-Regular, Consolas, monospace;
}
@font-face{font-family:'Inter';src:url('fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal}