/* GENERATED from the palette by pnpm design:index. Do not edit.
   Light is the root, dark is the [data-theme="dark"] override, the same way the
   mockups read their #dark hash. Code colours name what a token MEANS. */
:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #6e6e6e;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e7000b;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --success: #16a34a;
  --warning: #f59e0b;
  --update: #0284c7;
  --agent-working: #f59e0b;
  --stage: #f5f5f5;
  --sidebar: #fafafa;
  --sidebar-afloat: #f5f5f5;
  --sidebar-afloat-raised: #ebebeb;
  --shadow: rgba(0,0,0,0.10);
  --code-keyword: #8E44AD;
  --code-string: #2E7D32;
  --code-comment: rgba(60,60,67,0.45);
  --code-number: #C2410C;
  --code-type: #9A6700;
  --code-fn: #1D4ED8;
  --code-tag: #B91C1C;
  --code-attr: #0E7490;
  --code-punctuation: rgba(60,60,67,0.6);
  --surface-code: #0A84FF;
  --surface-arch: #9B7FE8;
  --surface-design: #E8749B;
  --surface-docs: #D9A036;
  --radius: 10px;
  --ui: "Segoe UI Variable Text", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Code", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}
:root[data-theme="dark"], [data-surface="dark"] {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: #e5e5e5;
  --primary-foreground: #171717;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --accent: #262626;
  --accent-foreground: #fafafa;
  --destructive: #ff6467;
  --border: rgba(255,255,255,0.10);
  --input: rgba(255,255,255,0.15);
  --ring: #737373;
  --success: #22c55e;
  --warning: #fbbf24;
  --update: #38bdf8;
  --agent-working: #f59e0b;
  --stage: #171717;
  --sidebar: #171717;
  --sidebar-afloat: #2e2e2e;
  --sidebar-afloat-raised: #404040;
  --shadow: rgba(0,0,0,0.50);
  --code-keyword: #C792EA;
  --code-string: #C3E88D;
  --code-comment: rgba(235,235,245,0.38);
  --code-number: #F78C6C;
  --code-type: #FFCB6B;
  --code-fn: #82AAFF;
  --code-tag: #FF8A80;
  --code-attr: #89DDFF;
  --code-punctuation: rgba(235,235,245,0.55);
}
/* The names the mockups were drawn with, each the role it means now. */
:root {
  --bg: var(--background);
  --chrome: var(--background);
  --label: var(--foreground);
  --sec: var(--muted-foreground);
  --ter: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
  --sep: var(--border);
  --fill: var(--muted);
  --onaccent: var(--primary-foreground);
  --green: var(--success);
  --greenbg: color-mix(in srgb, var(--success) 12%, transparent);
  --red: var(--destructive);
  --redbg: color-mix(in srgb, var(--destructive) 12%, transparent);
  --warn: var(--warning);
  --warnbg: color-mix(in srgb, var(--warning) 14%, transparent);
  --amber: var(--warning);
  --amberbg: color-mix(in srgb, var(--warning) 15%, transparent);
}
html { color-scheme: light; }
:root[data-theme="dark"], [data-surface="dark"] { color-scheme: dark; }