/* GENERATED by scripts/landing-styles.mjs from ui/styles/tokens.css (@getorrery/styles). Do not edit: change the source, then re-run. */
/* Orrery design system — tokens (v1, 2026-10-13). Package: @getorrery/styles (ui/styles/tokens.css);
   design/system/tokens.css is the canvas mirror (ui/styles/scripts/sync-design.mjs keeps them identical).
   Values = the ADE's (ade/src/styles.css) + Cloud's additions (cloud/web/src/tokens.css + styles.css :root).
   Themes: data-theme="graphite" (default, also :root) and data-theme="paper".
   The legacy names "orrery" / "orrery-light" are accepted as aliases.
   Density: data-density="compact" | "comfy" (regular is the default). Motion off: data-motion="off". */

@property --density   { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fs-scale  { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sp-1  { syntax: "<length>"; inherits: true; initial-value: 2px; }
@property --sp-2  { syntax: "<length>"; inherits: true; initial-value: 4px; }
@property --sp-3  { syntax: "<length>"; inherits: true; initial-value: 6px; }
@property --sp-4  { syntax: "<length>"; inherits: true; initial-value: 8px; }
@property --sp-5  { syntax: "<length>"; inherits: true; initial-value: 10px; }
@property --sp-6  { syntax: "<length>"; inherits: true; initial-value: 12px; }
@property --sp-7  { syntax: "<length>"; inherits: true; initial-value: 16px; }
@property --sp-8  { syntax: "<length>"; inherits: true; initial-value: 20px; }
@property --sp-9  { syntax: "<length>"; inherits: true; initial-value: 24px; }
@property --sp-10 { syntax: "<length>"; inherits: true; initial-value: 28px; }
@property --sp-11 { syntax: "<length>"; inherits: true; initial-value: 32px; }
@property --ctl-h-sm    { syntax: "<length>"; inherits: true; initial-value: 22px; }
@property --ctl-h       { syntax: "<length>"; inherits: true; initial-value: 28px; }
@property --ctl-h-lg    { syntax: "<length>"; inherits: true; initial-value: 34px; }
@property --row-h       { syntax: "<length>"; inherits: true; initial-value: 30px; }
@property --tree-row-h  { syntax: "<length>"; inherits: true; initial-value: 21px; }
@property --topbar-h    { syntax: "<length>"; inherits: true; initial-value: 44px; }
@property --statusbar-h { syntax: "<length>"; inherits: true; initial-value: 24px; }
@property --fs-3xs { syntax: "<length>"; inherits: true; initial-value: 12px; }
@property --fs-2xs { syntax: "<length>"; inherits: true; initial-value: 13px; }
@property --fs-xs  { syntax: "<length>"; inherits: true; initial-value: 14px; }
@property --fs-sm  { syntax: "<length>"; inherits: true; initial-value: 16px; }
@property --fs-ui  { syntax: "<length>"; inherits: true; initial-value: 16px; }
@property --fs-tree { syntax: "<length>"; inherits: true; initial-value: 16px; }
@property --fs-md  { syntax: "<length>"; inherits: true; initial-value: 18px; }
@property --fs-lg  { syntax: "<length>"; inherits: true; initial-value: 20px; }
@property --fs-xl  { syntax: "<length>"; inherits: true; initial-value: 28px; }
@property --fs-2xl { syntax: "<length>"; inherits: true; initial-value: 32px; }
@property --fs-display { syntax: "<length>"; inherits: true; initial-value: 48px; }
@property --fs-code { syntax: "<length>"; inherits: true; initial-value: 13px; }
@property --lh-code { syntax: "<length>"; inherits: true; initial-value: 18px; }

/* ── theme-independent tokens ─────────────────────────────────────────── */
:root, :host {
  /* UI accent: the ONLY decorative hue (focus, selection, active indicator, primary fill, meters) */
  --accent: #a855f7;
  --accent-fill: #b082f7;
  --accent-on: #0d0d0f;
  --accent-ink: #c39afc;
  --accent-rgb: 168, 85, 247;

  /* brand mark only */
  --brand-1: #ff5d9e;
  --brand-2: #a855f7;
  --brand-3: #22d3ee;
  --accent-2: #22d3ee;      /* legacy alias of brand-3 (ADE), brand surfaces only */
  --accent-3: #ff5d9e;      /* legacy alias of brand-1 (ADE) */
  --accent-2-rgb: 34, 211, 238;
  --brand-core: #ffffff;
  --brand-plate: #090a0f;
  --boot-bg: #07080d;
  --boot-grid: rgba(255, 255, 255, 0.022);

  /* semantic hues */
  --sem-add: #57c98a;
  --sem-del: #e06c7a;
  --sem-attn: #d9a441;
  --sem-change: #5e9cf5;
  --sem-live: #3fb6c4;

  /* agent status */
  --st-running: var(--sem-live);
  --st-blocked: var(--sem-del);
  --st-waiting: var(--sem-attn);
  --st-done: var(--sem-add);
  --st-idle: var(--ink-3);
  --st-online: var(--sem-add);
  --st-offline: var(--ink-4);

  /* VCS file state */
  --vcs-added: var(--sem-add);
  --vcs-modified: var(--sem-change);
  --vcs-renamed: var(--sem-change);
  --vcs-deleted: var(--ink-3);
  --vcs-conflicted: var(--sem-attn);
  --vcs-untracked: var(--ink-3);
  --vcs-ignored: var(--ink-4);

  /* log levels */
  --log-err: var(--sem-del);
  --log-warn: var(--sem-attn);
  --log-info: var(--ink-2);
  --log-sys: var(--ink-3);

  /* diff sides */
  --side-a: color-mix(in oklch, var(--ink), transparent 96%);
  --side-b: color-mix(in oklch, var(--ink), transparent 92%);

  /* UI-accent roles */
  --ui-ink: var(--accent-ink);
  --ui-fill: var(--accent-fill);
  --ui-on-fill: var(--accent-on);
  --ui-ind: var(--accent);
  --ui-sel: color-mix(in oklch, var(--accent), transparent 88%);
  --ui-sel-2: color-mix(in oklch, var(--accent), transparent 74%);
  --ui-line: color-mix(in oklch, var(--accent), transparent 55%);
  --ui-focus: var(--accent);
  --ui-ring: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 84%);
  --ui-meter: var(--accent);
  --ui-link: var(--accent-ink);

  /* Cloud: semantic fills + lines */
  --attn-line: color-mix(in oklch, var(--sem-attn), transparent 55%);
  --attn-fill: color-mix(in oklch, var(--sem-attn), transparent 88%);
  --del-line: color-mix(in oklch, var(--sem-del), transparent 60%);
  --del-fill: color-mix(in oklch, var(--sem-del), transparent 82%);
  --add-line: color-mix(in oklch, var(--sem-add), transparent 60%);
  --add-fill: color-mix(in oklch, var(--sem-add), transparent 88%);
  --change-line: color-mix(in oklch, var(--sem-change), transparent 60%);
  --change-fill: color-mix(in oklch, var(--sem-change), transparent 88%);
  --live-line: color-mix(in oklch, var(--sem-live), transparent 60%);
  --live-fill: color-mix(in oklch, var(--sem-live), transparent 88%);

  /* identity (lanes, avatars, projects) */
  --lane-1: #8f7bd6; --lane-2: #5e8fb8; --lane-3: #67a888; --lane-4: #c09a54;
  --lane-5: #b8798f; --lane-6: #6f8fc4; --lane-7: #9d86b8;
  --id-1: var(--lane-1); --id-2: var(--lane-2); --id-3: var(--lane-3); --id-4: var(--lane-4);
  --id-5: var(--lane-5); --id-6: var(--lane-6); --id-7: var(--lane-7);

  /* external agent-tool marks */
  --tool-claude: #d98a5b;
  --tool-codex: #10a37f;
  --tool-cursor: #6e9bff;
  --tool-gemini: #8a7cff;
  --tool-pi: var(--ink-3);

  --on-solid: #ffffff;

  /* type */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-disp: var(--font-ui);
  --font-brand: "Space Grotesk", var(--font-ui);

  /* radii (fixed, not density-scaled) */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 15px;       /* Cloud: dialogs, sheets, push banner */
  --r-pill: 999px;

  /* density engine */
  --density: 1;
  --fs-scale: 1;
  --sp-1:  round(calc(2px  * var(--density)), 1px);
  --sp-2:  round(calc(4px  * var(--density)), 1px);
  --sp-3:  round(calc(6px  * var(--density)), 1px);
  --sp-4:  round(calc(8px  * var(--density)), 1px);
  --sp-5:  round(calc(10px * var(--density)), 1px);
  --sp-6:  round(calc(12px * var(--density)), 1px);
  --sp-7:  round(calc(16px * var(--density)), 1px);
  --sp-8:  round(calc(20px * var(--density)), 1px);
  --sp-9:  round(calc(24px * var(--density)), 1px);
  --sp-10: round(calc(28px * var(--density)), 1px);
  --sp-11: round(calc(32px * var(--density)), 1px);
  --ctl-h-sm: round(calc(22px * var(--density)), 1px);
  --ctl-h:    round(calc(28px * var(--density)), 1px);
  --ctl-h-lg: round(calc(34px * var(--density)), 1px);
  --row-h:    round(calc(30px * var(--density)), 1px);
  --tree-row-h: round(calc(21px * var(--density)), 1px);
  --topbar-h:    round(calc(44px * var(--density)), 1px);
  --statusbar-h: round(calc(24px * var(--density)), 1px);
  --pad: var(--sp-6);
  --sidebar-w: round(calc(252px * var(--density)), 1px);
  --right-w:   round(calc(312px * var(--density)), 1px);
  --rail-w: 54px;
  --page-x: var(--sp-10);       /* Cloud: page gutters */
  --phone-head-h: 56px;
  --phone-w: 390px;
  --tap: 44px;                  /* phone touch target */

  /* type ramp */
  --fs-4xs: round(calc(10.5px * var(--fs-scale)), 0.5px);
  --fs-3xs: round(calc(12px * var(--fs-scale)), 0.5px);
  --fs-2xs: round(calc(13px * var(--fs-scale)), 0.5px);
  --fs-xs:  round(calc(14px * var(--fs-scale)), 0.5px);
  --fs-sm:  round(calc(16px * var(--fs-scale)), 0.5px);
  --fs-ui:   var(--fs-xs);
  --fs-tree: var(--fs-xs);
  --fs-md:  round(calc(18px * var(--fs-scale)), 0.5px);
  --fs-lg:  round(calc(20px * var(--fs-scale)), 0.5px);
  --fs-xl:  round(calc(28px * var(--fs-scale)), 0.5px);
  --fs-2xl: round(calc(32px * var(--fs-scale)), 0.5px);
  --fs-display: round(calc(48px * var(--fs-scale)), 0.5px);
  /* Cloud / phone steps */
  --fs-tag: round(calc(11px * var(--fs-scale)), 0.5px);
  --fs-phone: round(calc(15px * var(--fs-scale)), 0.5px);
  --fs-phone-title: round(calc(17px * var(--fs-scale)), 0.5px);
  --fs-boot: round(calc(40px * var(--fs-scale)), 0.5px);

  /* type roles */
  --fs-body:  var(--fs-xs);    /* 14 */
  --fs-label: var(--fs-xs);    /* 14 */
  --fs-meta:  var(--fs-2xs);   /* 13 */
  --fs-badge: var(--fs-3xs);   /* 12 */
  --fs-micro: var(--fs-4xs);   /* 10.5 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-strong: 600;

  /* icons (em: track the text beside them) */
  --ico-xs: 0.75em;
  --ico-sm: 0.875em;
  --ico-md: 1em;
  --ico-lg: 1.125em;
  --ico-xl: 1.25em;

  /* code surfaces */
  --fs-code: round(calc(13px * var(--fs-scale)), 0.5px);
  --lh-code: round(calc(18px * var(--fs-scale)), 1px);

  /* motion (ADE-05) */
  --dur-fast: 130ms;     /* hover, press */
  --dur: 200ms;          /* state change */
  --dur-enter: 320ms;    /* toast / sheet / dialog rise */
  --dur-slow: 600ms;     /* progress, reveal */
  --dur-pulse: 2200ms;   /* running dot */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* z ladder */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-sheet: 200;
  --z-dialog: 300;
  --z-palette: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* small shadows */
  --shadow-knob: 0 1px 3px color-mix(in oklch, black, transparent 65%);
}

[data-density="compact"] { --density: 0.85; --fs-scale: 0.875; }
[data-density="comfy"]   { --density: 1.18; --fs-scale: 1.125; }

/* ── GRAPHITE (dark, default) ─────────────────────────────────────────── */
:root, :host, [data-theme="graphite"], [data-theme="orrery"] {
  --bg: #121315;
  --panel: #17181a;
  --panel-2: #1d1e20;
  --panel-3: #232427;
  --elev: #2c2d30;
  --elev-hover: #37393d;
  --hair: #353739;
  --hair-2: #444548;
  --bg-grid: rgba(255, 255, 255, 0.02);
  --ink: #dee0e2;
  --ink-2: #b0b1b3;
  --ink-3: #8a8b8c;
  --ink-4: #68696b;
  --code-add-bg: color-mix(in oklch, var(--sem-add), transparent 78%);
  --code-add-ink: #7fd7a5;
  --code-del-bg: color-mix(in oklch, var(--sem-del), transparent 78%);
  --code-del-ink: #ef8a95;
  --well: #0d0e10;
  --glow: 0 0 0 1px color-mix(in oklch, var(--accent), transparent 45%);
  --shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.65);
  --scrim: rgba(4, 5, 9, 0.58);
  --scan: rgba(255, 255, 255, 0.02);
  --desk-1: #11131d;
  --desk-2: #050609;
  color-scheme: dark;
}
/* a nested graphite block must also reset the theme-dependent accent + semantics */
[data-theme="graphite"], [data-theme="orrery"] {
  --accent: #a855f7; --accent-fill: #b082f7; --accent-on: #0d0d0f; --accent-ink: #c39afc; --accent-rgb: 168, 85, 247;
  --sem-add: #57c98a; --sem-del: #e06c7a; --sem-attn: #d9a441; --sem-change: #5e9cf5; --sem-live: #3fb6c4;
}

/* ── PAPER (light) ────────────────────────────────────────────────────── */
[data-theme="paper"], [data-theme="orrery-light"] {
  --bg: #dedede;
  --panel: #e8e8e8;
  --panel-2: #f2f2f2;
  --panel-3: #e4e4e4;
  --elev: #f7f7f7;
  --elev-hover: #e9e9e9;
  --hair: #d1d1d1;
  --hair-2: #bababa;
  --bg-grid: rgba(0, 0, 0, 0.022);
  --ink: #3b3b3b;
  --ink-2: #515151;
  --ink-3: #6e6e6e;
  --ink-4: #8c8c8c;
  --accent: #8d4dcc;
  --accent-fill: #752cb3;
  --accent-on: #ffffff;
  --accent-ink: #8d4dcc;
  --accent-rgb: 141, 77, 204;
  --sem-add: #1e7d3e;
  --sem-del: #bf4240;
  --sem-attn: #996100;
  --sem-change: #1c6dc8;
  --sem-live: #00788b;
  --code-add-bg: color-mix(in oklch, var(--sem-add), transparent 82%);
  --code-add-ink: #146b33;
  --code-del-bg: color-mix(in oklch, var(--sem-del), transparent 82%);
  --code-del-ink: #a83234;
  --well: #e9e9e9;
  --glow: 0 0 0 1px color-mix(in oklch, var(--accent), transparent 50%);
  --shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.28);
  --scrim: rgba(30, 30, 30, 0.34);
  --scan: rgba(0, 0, 0, 0.015);
  --desk-1: #c4c4c4;
  --desk-2: #a8a8a8;
  color-scheme: light;
}

/* var() in a custom property resolves where it is declared: re-declare the
   aliases on every theme root so a nested theme picks up its own ramp. */
[data-theme] {
  --st-running: var(--sem-live); --st-blocked: var(--sem-del); --st-waiting: var(--sem-attn);
  --st-done: var(--sem-add); --st-idle: var(--ink-3); --st-online: var(--sem-add); --st-offline: var(--ink-4);
  --vcs-added: var(--sem-add); --vcs-modified: var(--sem-change); --vcs-renamed: var(--sem-change);
  --vcs-deleted: var(--ink-3); --vcs-conflicted: var(--sem-attn); --vcs-untracked: var(--ink-3); --vcs-ignored: var(--ink-4);
  --log-err: var(--sem-del); --log-warn: var(--sem-attn); --log-info: var(--ink-2); --log-sys: var(--ink-3);
  --side-a: color-mix(in oklch, var(--ink), transparent 96%);
  --side-b: color-mix(in oklch, var(--ink), transparent 92%);
  --ui-ink: var(--accent-ink); --ui-fill: var(--accent-fill); --ui-on-fill: var(--accent-on); --ui-ind: var(--accent);
  --ui-sel: color-mix(in oklch, var(--accent), transparent 88%);
  --ui-sel-2: color-mix(in oklch, var(--accent), transparent 74%);
  --ui-line: color-mix(in oklch, var(--accent), transparent 55%);
  --ui-focus: var(--accent);
  --ui-ring: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 84%);
  --ui-meter: var(--accent); --ui-link: var(--accent-ink);
  --attn-line: color-mix(in oklch, var(--sem-attn), transparent 55%);
  --attn-fill: color-mix(in oklch, var(--sem-attn), transparent 88%);
  --del-line: color-mix(in oklch, var(--sem-del), transparent 60%);
  --del-fill: color-mix(in oklch, var(--sem-del), transparent 82%);
  --add-line: color-mix(in oklch, var(--sem-add), transparent 60%);
  --add-fill: color-mix(in oklch, var(--sem-add), transparent 88%);
  --change-line: color-mix(in oklch, var(--sem-change), transparent 60%);
  --change-fill: color-mix(in oklch, var(--sem-change), transparent 88%);
  --live-line: color-mix(in oklch, var(--sem-live), transparent 60%);
  --live-fill: color-mix(in oklch, var(--sem-live), transparent 88%);
  --tool-pi: var(--ink-3);
  /* the theme's own ground and ink, so a nested themed block paints itself */
  color: var(--ink);
}
[data-density] {
  --sp-1:  round(calc(2px  * var(--density)), 1px);
  --sp-2:  round(calc(4px  * var(--density)), 1px);
  --sp-3:  round(calc(6px  * var(--density)), 1px);
  --sp-4:  round(calc(8px  * var(--density)), 1px);
  --sp-5:  round(calc(10px * var(--density)), 1px);
  --sp-6:  round(calc(12px * var(--density)), 1px);
  --sp-7:  round(calc(16px * var(--density)), 1px);
  --sp-8:  round(calc(20px * var(--density)), 1px);
  --sp-9:  round(calc(24px * var(--density)), 1px);
  --sp-10: round(calc(28px * var(--density)), 1px);
  --sp-11: round(calc(32px * var(--density)), 1px);
  --ctl-h-sm: round(calc(22px * var(--density)), 1px);
  --ctl-h:    round(calc(28px * var(--density)), 1px);
  --ctl-h-lg: round(calc(34px * var(--density)), 1px);
  --row-h:    round(calc(30px * var(--density)), 1px);
  --tree-row-h: round(calc(21px * var(--density)), 1px);
  --topbar-h:    round(calc(44px * var(--density)), 1px);
  --statusbar-h: round(calc(24px * var(--density)), 1px);
  --fs-4xs: round(calc(10.5px * var(--fs-scale)), 0.5px);
  --fs-3xs: round(calc(12px * var(--fs-scale)), 0.5px);
  --fs-2xs: round(calc(13px * var(--fs-scale)), 0.5px);
  --fs-xs:  round(calc(14px * var(--fs-scale)), 0.5px);
  --fs-sm:  round(calc(16px * var(--fs-scale)), 0.5px);
  --fs-ui:   var(--fs-xs);
  --fs-tree: var(--fs-xs);
  --fs-md:  round(calc(18px * var(--fs-scale)), 0.5px);
  --fs-lg:  round(calc(20px * var(--fs-scale)), 0.5px);
  --fs-xl:  round(calc(28px * var(--fs-scale)), 0.5px);
  --fs-2xl: round(calc(32px * var(--fs-scale)), 0.5px);
  --fs-display: round(calc(48px * var(--fs-scale)), 0.5px);
  --sidebar-w: round(calc(252px * var(--density)), 1px);
  --right-w:   round(calc(312px * var(--density)), 1px);
  --fs-tag: round(calc(11px * var(--fs-scale)), 0.5px);
  --fs-phone: round(calc(15px * var(--fs-scale)), 0.5px);
  --fs-phone-title: round(calc(17px * var(--fs-scale)), 0.5px);
  --fs-code: round(calc(13px * var(--fs-scale)), 0.5px);
  --lh-code: round(calc(18px * var(--fs-scale)), 1px);
}

[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── terminal (Harness TUI) ───────────────────────────────────────────── */
:root, :host, [data-theme="graphite"], [data-theme="orrery"] {
  --term-bg: #0d0e10;
  --term-body: #c9cacc;
  --term-om-1: #ff5d9e; --term-om-2: #d65bcb; --term-om-3: #a855f7; --term-om-4: #6f93f2; --term-om-5: #22d3ee;
  --term-om-v1: #d8bcff; --term-om-v2: #a86bff; --term-om-v3: #6f3fd6;
  --term-om-core: #ffffff; --term-om-core2: #f3e3ff; --term-om-ring: #a855f7; --term-om-glow: rgba(168, 85, 247, 0.55);
}
[data-theme="paper"], [data-theme="orrery-light"] {
  --term-bg: #f2f2f2;
  --term-body: #3b3b3b;
  --term-om-1: #d42f7c; --term-om-2: #b23aa8; --term-om-3: #8a3fe0; --term-om-4: #3f63d6; --term-om-5: #0a86a3;
  --term-om-v1: #9a5ae6; --term-om-v2: #7a38d4; --term-om-v3: #4f1f9c;
  --term-om-core: #2b1450; --term-om-core2: #5b2aa0; --term-om-ring: #8d4dcc; --term-om-glow: rgba(141, 77, 204, 0.28);
}
:root, :host { --term-cell-w: 8px; --term-cell-h: 18px; }

/* ── syntax (Monaco built-in themes the ADE editor inherits: vs-dark for Graphite, vs for Paper; function and
   punctuation have no Monaco colour, so they take the editor ink) ─────────────────────────────────── */
:root, :host, [data-theme="graphite"], [data-theme="orrery"] {
  --syn-kw: #569cd6; --syn-str: #ce9178; --syn-num: #b5cea8; --syn-com: #6a9955;
  --syn-type: #4ec9b0; --syn-fn: var(--ink); --syn-punc: var(--ink-2);
}
[data-theme="paper"], [data-theme="orrery-light"] {
  --syn-kw: #0000ff; --syn-str: #a31515; --syn-num: #098658; --syn-com: #008000;
  --syn-type: #267f99; --syn-fn: var(--ink); --syn-punc: var(--ink-2);
}