:root {
  /* Blinqx look. Values come from eblinqx-agentic-design/packages/tokens
     (blinqx.tokens.json, brand-map.css). Alpha tokens (black/05 etc.) are
     flattened onto white so borders and fills stay solid. Blinqx has no dark
     mode; the dark palette mirrors the black-alpha steps as white-alpha steps. */
  color-scheme: light;
  --page: #edece7;            /* surface.dashboard */
  --surface: #ffffff;         /* surface.elevated */
  --surface-2: #f8f8f8;       /* black/03 on white (surface.secondary) */
  --surface-3: #f2f2f2;       /* black/05 on white (muted, secondary button) */
  --ink: #000000;             /* text.primary */
  --ink-2: #666666;           /* text.secondary (black/60) */
  --muted: #737373;           /* table-cell header text; text.tertiary (black/40) is too light for body text */
  --line: #e6e6e6;            /* border.default (black/10) */
  --line-2: #cccccc;          /* border.strong (black/20) */
  --accent: #000000;          /* button.primary-fill: Blinqx primary action is black */
  --accent-ink: #ffffff;      /* button.primary-text */
  --accent-soft: #fff6d0;     /* yellow/20-40 on white: selection plane */
  --accent-on-soft: #000000;
  --brand: #ffe061;           /* surface.accent / button.accent-fill */
  --brand-ink: #000000;
  --glow: rgba(255,224,97,.38);  /* sign-in backdrop: surface.accent glow */
  --ring: #000000;            /* brand-map --ring = text.primary */
  --good: #3cc983;            /* status.positive.solid / success/100 */
  --good-soft: #ecf9f3;       /* status.positive.fill (success/10) */
  --good-ink: #1b7a4b;        /* success/100 darkened for 4.5:1 text */
  --good-solid: #1b7a4b; --good-on-solid: #ffffff;
  --warn: #f79e51;            /* status.warning.solid / secondary/100 */
  --warn-soft: #fef5ee;       /* status.warning.fill (secondary/10) */
  --warn-ink: #9a4d0c;        /* secondary/100 darkened for text */
  --bad: #e05555;             /* destructive/100 */
  --bad-soft: #fceeee;        /* destructive/10 */
  --bad-ink: #b83232;         /* destructive/100 darkened for text */
  --run-soft: #ecf3fc;        /* blue/10 */
  --run-ink: #2563b8;         /* blue/100 darkened for text */
  --neutral-soft: #f2f2f2;    /* black/05: neutral badge */
  --fill-hover: #e6e6e6;      /* black/10: secondary button hover */
  --bad-soft-hover: #f9dddd;  /* destructive/20 */
  /* Run-outcome chart colours, checked for colour-blind separation. */
  --s-running: #2563b8; --s-good: #2aa86a; --s-bad: #b83232; --s-other: #a8a8a3; --s-1: #2563b8;
  --shadow: 0 3px 1.31px rgba(0,0,0,.05);  /* shadow.card */
  --shadow-lg: 0 24px 60px rgba(0,0,0,.16), 0 8px 4.36px rgba(0,0,0,.05);  /* overlay + shadow.prompt */
  --scrim: rgba(0,0,0,.32);
  --radius: 16px;             /* radius.lg */
  --radius-sm: 8px;           /* radius.md */
  --radius-input: 12px;       /* radius.input */
  --radius-xl: 24px;          /* radius.xl */
  --font: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;  /* font.family.sans; Outfit only if installed locally */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #121211; --surface: #1c1c1b; --surface-2: #232322; --surface-3: #2b2b2a;
    --ink: #ffffff; --ink-2: #c2c2bf; --muted: #9a9a96; --line: #2f2f2e; --line-2: #454544;
    --accent: #ffffff; --accent-ink: #000000; --accent-soft: rgba(255,224,97,.14); --accent-on-soft: #ffe061;
    --brand: #ffe061; --brand-ink: #000000; --ring: #ffffff; --glow: rgba(255,224,97,.09);
    --good: #4fd694; --good-soft: rgba(60,201,131,.16); --good-ink: #6fe0a8; --good-solid: #3cc983; --good-on-solid: #000000;
    --warn: #f79e51; --warn-soft: rgba(247,158,81,.16); --warn-ink: #f8b77c;
    --bad: #e05555; --bad-soft: rgba(224,85,85,.18); --bad-ink: #f08a8a;
    --run-soft: rgba(62,140,224,.18); --run-ink: #8cbcf2;
    --neutral-soft: rgba(255,255,255,.08); --fill-hover: #3a3a39; --bad-soft-hover: rgba(224,85,85,.28);
    --s-running: #3e8ce0; --s-good: #2fa66b; --s-bad: #d04545; --s-other: #8e8e8a; --s-1: #3e8ce0;
    --shadow: 0 1px 2px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
    --scrim: rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #121211; --surface: #1c1c1b; --surface-2: #232322; --surface-3: #2b2b2a;
  --ink: #ffffff; --ink-2: #c2c2bf; --muted: #9a9a96; --line: #2f2f2e; --line-2: #454544;
  --accent: #ffffff; --accent-ink: #000000; --accent-soft: rgba(255,224,97,.14); --accent-on-soft: #ffe061;
  --brand: #ffe061; --brand-ink: #000000; --ring: #ffffff; --glow: rgba(255,224,97,.09);
  --good: #4fd694; --good-soft: rgba(60,201,131,.16); --good-ink: #6fe0a8; --good-solid: #3cc983; --good-on-solid: #000000;
  --warn: #f79e51; --warn-soft: rgba(247,158,81,.16); --warn-ink: #f8b77c;
  --bad: #e05555; --bad-soft: rgba(224,85,85,.18); --bad-ink: #f08a8a;
  --run-soft: rgba(62,140,224,.18); --run-ink: #8cbcf2;
  --neutral-soft: rgba(255,255,255,.08); --fill-hover: #3a3a39; --bad-soft-hover: rgba(224,85,85,.28);
  --s-running: #3e8ce0; --s-good: #2fa66b; --s-bad: #d04545; --s-other: #8e8e8a; --s-1: #3e8ce0;
  --shadow: 0 1px 2px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --scrim: rgba(0,0,0,.6);
}