/* GENERATED by design-tokens.mjs from the token files in ./tokens/ (relative to this file) — do not edit by hand. Change the tokens, then run the build. */
/* LOOPR — the One line brand. Base = DARK (the default, also applies when no data-theme is set); themes/light.tokens.json overrides the colours for light. Token NAMES are a contract (agent apps read some of them) — change values, never names. Colour only ever means status: green = live, amber = needs you, violet = got better / best, red = error; the accent is ink. Aliases at the top are pure references. */
:root {
  --radius-pill: 999px;
  --radius-sm: 8px; /* controls: fields, small buttons */
  --radius-md: 10px;
  --radius: 12px; /* cards */
  --radius-menu: 14px;
  --radius-lg: 18px; /* modals */
  --dur-fast: 130ms;
  --dur-base: 200ms;
  --dur-reveal: 500ms;
  --dur-draw: 1250ms; /* a line drawing itself */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* the ONE easing curve */
  --scrim: rgba(255, 255, 255, .18); /* translucent light layer for use on saturated fills */
  --fg: var(--ink); /* legacy alias of --ink */
  --line2: var(--border2); /* stronger hairline — the thinking-spinner track (ReasoningTrail) points here */
  --gnsoft: var(--grsoft); /* legacy alias of the soft-green tint */
  --greensoft: var(--grsoft); /* legacy alias of the soft-green tint */
  --faint-bg: var(--hover); /* subtle chip background */
  --cockpit-canvas: #ffffff; /* fixed light canvas for the agent-authored cockpit iframe — a document-default white so dark text stays readable in BOTH themes; intentionally not overridden per-theme */
  --bg-solid: #0B0B0D; /* page — the solid colour; bg points here except over an agent background (agent colours) */
  --bg: var(--bg-solid);
  --bg2-solid: #101012; /* page, one step up (sessions strip, quiet wells) — the solid colour; bg2 points here except over an agent background (agent colours) */
  --bg2: var(--bg2-solid);
  --sidebar-solid: #0B0B0D; /* side panels sit on the page colour, split by hairlines — the solid colour; sidebar points here except over an agent background (agent colours) */
  --sidebar: var(--sidebar-solid);
  --panel-solid: #141417; /* surface: cards, tables, menus, fields — the solid colour; panel points here except over an agent background (agent colours) */
  --panel: var(--panel-solid);
  --raise-solid: #1B1B1F; /* surface-2: table heads, raised wells — the solid colour; raise points here except over an agent background (agent colours) */
  --raise: var(--raise-solid);
  --hover: #1D1D21;
  --hover2: #25252A;
  --border: rgba(255, 255, 255, .10); /* hairline */
  --border2: rgba(255, 255, 255, .16); /* hairline, strong */
  --line: rgba(255, 255, 255, .07); /* row divider */
  --scroll: rgba(255, 255, 255, .14);
  --scrollh: rgba(255, 255, 255, .24);
  --ink: #F4F4F2; /* text */
  --ink2: #DEDEDB;
  --ink3: #C2C2BF;
  --dim: #9A9A97; /* muted text */
  --dim2: #90908D;
  --faint: #878784; /* faint text (meta) — still 4.5:1 on every surface */
  --faint2: #5E5E5C; /* decor only (icons at rest, placeholders, dividers) — never body text */
  --btnbg: #F4F4F2; /* the main button: an ink pill */
  --btnbgh: #FFFFFF;
  --btnfg: #0B0B0D;
  --accent: #F4F4F2; /* accent = ink, never a hue (links, focus ring, active tab, selection) */
  --blsoft: #202025; /* selection tint (neutral) */
  --blborder: rgba(255, 255, 255, .24);
  --bltext: #DEDEDB;
  --green: #43B86A; /* live (running, connected) — text-safe per theme */
  --grsoft: #14261A;
  --amber: #E8A93C; /* needs you (approval) — text-safe per theme */
  --amsoft: #272012;
  --amborder: #5C451A;
  --amtext: #E8A93C;
  --red: #E85D57; /* error */
  --rdsoft: #2A1615;
  --violet: #9D7CFF; /* got better / best — strokes and fills (rare) */
  --vitext: #9D7CFF; /* violet as text */
  --visoft: #1E1930;
  --vborder: rgba(157, 124, 255, .45);
  --live: #43B86A; /* the live dot / pen tip (fill only, never text in light) */
  --pine: #F4F4F2; /* legacy: active item ink (was the old accent hue) */
  --pine-soft: #1E1E22; /* legacy: active item background */
  --apricot: #E8A93C; /* legacy alias of needs-you amber */
  --apricot-soft: #272012;
  --railtx: #9A9A97;
  --rail-bg-solid: #0B0B0D; /* the solid colour; rail-bg points here except over an agent background (agent colours) */
  --rail-bg: var(--rail-bg-solid);
  --rail-icon-border: rgba(255, 255, 255, .12);
  --sess-solid: #101012; /* the solid colour; sess points here except over an agent background (agent colours) */
  --sess: var(--sess-solid);
  --st-run: #43B86A; /* status dot: running */
  --st-appr: #E8A93C; /* status dot: needs you */
  --st-done: #9A9A97; /* status dot: finished (neutral; colour only means live / needs you / error / best) */
  --st-fail: #E85D57; /* status dot: failed */
  --st-idle: #5E5E5C; /* status dot: idle */
  --on-accent: #0B0B0D;
  --on-red: #0B0B0D;
  --on-green: #0B0B0D;
  --on-amber: #1A1306; /* text on an amber (needs you) fill, e.g. the rail waiting count */
  --shadow-color: rgba(0, 0, 0, .5);
  --overlay: rgba(0, 0, 0, .62);
  --cat-blue: #5B9CF6; /* agent app pages only: a category or a chart series, never a status (status keeps green / amber / violet / red) */
  --cat-blue-soft: #16233A;
  --cat-orange: #F2884B; /* agent app pages only: a category or a chart series, never a status (status keeps green / amber / violet / red) */
  --cat-orange-soft: #2E1C12;
  --cat-teal: #3CC3B4; /* agent app pages only: a category or a chart series, never a status (status keeps green / amber / violet / red) */
  --cat-teal-soft: #11292A;
  --cat-pink: #F06AA8; /* agent app pages only: a category or a chart series, never a status (status keeps green / amber / violet / red) */
  --cat-pink-soft: #2E1522;
  --mono: var(--fmono); /* legacy alias of the mono font stack */
  --fdisp: 'Space Grotesk Variable', 'Space Grotesk', system-ui, sans-serif; /* display: wordmark, page titles, big numbers */
  --fbody: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif; /* body + UI */
  --fmono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace; /* labels, numbers, versions, code */
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 50px -20px rgba(0, 0, 0, .75); /* floating layers only (menus, modals, toasts) */
}

/* LIGHT — the same brand on warm paper (#FAF9F6). Overrides colours + shadows only; green / amber / violet TEXT is darkened to pass 4.5:1. */
:root[data-theme="light"] {
  --bg-solid: #FAF9F6;
  --bg2-solid: #F6F5F1;
  --sidebar-solid: #FAF9F6;
  --panel-solid: #FFFFFF;
  --raise-solid: #F3F2EE;
  --hover: #F0EFEA;
  --hover2: #E8E7E1;
  --border: rgba(20, 20, 15, .10);
  --border2: rgba(20, 20, 15, .16);
  --line: rgba(20, 20, 15, .07);
  --scroll: rgba(20, 20, 15, .16);
  --scrollh: rgba(20, 20, 15, .28);
  --ink: #14140F;
  --ink2: #2C2C27;
  --ink3: #45453F;
  --dim: #64645F;
  --dim2: #6A6A64;
  --faint: #66665F;
  --faint2: #B5B5B0;
  --btnbg: #14140F;
  --btnbgh: #2C2C27;
  --btnfg: #FAF9F6;
  --accent: #14140F;
  --blsoft: #ECEBE5;
  --blborder: rgba(20, 20, 15, .24);
  --bltext: #2C2C27;
  --green: #24713C;
  --grsoft: #E4F2E8;
  --amber: #875A0A;
  --amsoft: #FBF1DD;
  --amborder: #EACB8C;
  --amtext: #82570A;
  --red: #B5352F;
  --rdsoft: #FBE8E6;
  --vitext: #6C4FE0;
  --visoft: #EFEAFE;
  --vborder: rgba(108, 79, 224, .35);
  --pine: #14140F;
  --pine-soft: #EFEEE9;
  --apricot: #875A0A;
  --apricot-soft: #FBF1DD;
  --railtx: #64645F;
  --rail-bg-solid: #FAF9F6;
  --rail-icon-border: rgba(20, 20, 15, .12);
  --sess-solid: #F6F5F1;
  --st-done: #85857F;
  --st-fail: #B5352F;
  --st-idle: #B5B5B0;
  --on-accent: #FAF9F6;
  --on-red: #FFFFFF;
  --on-green: #FFFFFF;
  --shadow-color: rgba(20, 20, 15, .14);
  --overlay: rgba(20, 20, 15, .38);
  --cat-blue: #2F64C4;
  --cat-blue-soft: #E5EEFC;
  --cat-orange: #B9531A;
  --cat-orange-soft: #FDEADF;
  --cat-teal: #16776C;
  --cat-teal-soft: #E0F4F1;
  --cat-pink: #B4316F;
  --cat-pink-soft: #FBE5EF;
  --shadow: 0 1px 2px rgba(20, 20, 15, .06);
  --shadow-lg: 0 16px 44px -18px rgba(20, 20, 15, .24);
}