/* ============================================================
   Cue — Color tokens
   Primitive brand palette + semantic roles. Mirrors the values
   shipped in @qaecy/cue-ui. Light is the default; .dark scope
   re-maps the semantic roles only (primitives never change).
   ============================================================ */

:root {
  /* ---- Primitive palette ---- */
  --cue-color-blue: #2859e1;          /* primary brand blue */
  --cue-color-darkblue: #1744c2;      /* secondary / pressed blue */
  --cue-color-green: #e2f552;         /* lime accent (logo highlight) */
  --cue-color-turquoise: #00cacc;     /* logo animation glow */

  --cue-color-white: #ffffff;
  --cue-color-ultralightgray: #f5f6f9; /* app canvas */
  --cue-color-lightgray: #d9d9d9;      /* hairline borders */
  --cue-color-midgray: #8394b0;        /* muted text / neutral */
  --cue-color-darkmidgray: #404955;    /* secondary text */
  --cue-color-darkgray: #121c2b;       /* primary foreground */
  --cue-color-black: #0e1827;          /* deepest ink / dark canvas */

  /* ---- Status primitives ---- */
  --cue-color-error: #fc2626;
  --cue-color-success: #4caf50;
  --cue-color-warning: #ffc107;

  /* ---- Semantic roles (light) ---- */
  --cue-main-background: var(--cue-color-ultralightgray);
  --cue-main-foreground: var(--cue-color-darkgray);

  --cue-default: var(--cue-color-white);
  --cue-defaultContrast: var(--cue-color-darkgray);
  --cue-primary: var(--cue-color-blue);
  --cue-primaryContrast: var(--cue-color-white);
  --cue-accent: var(--cue-color-green);
  --cue-accentContrast: var(--cue-color-darkgray);
  --cue-secondary: var(--cue-color-darkblue);
  --cue-secondaryContrast: var(--cue-color-white);
  --cue-neutral: var(--cue-color-midgray);
  --cue-neutralContrast: var(--cue-color-darkgray);

  --cue-info: var(--cue-color-darkblue);
  --cue-infoContrast: var(--cue-color-white);
  --cue-error: var(--cue-color-error);
  --cue-errorContrast: var(--cue-color-white);
  --cue-success: var(--cue-color-success);
  --cue-successContrast: var(--cue-color-white);
  --cue-warning: var(--cue-color-warning);
  --cue-warningContrast: var(--cue-color-white);

  --cue-border-color: var(--cue-color-lightgray);
  --cue-scrollbar-thumb-color: var(--cue-color-lightgray);
  --cue-scrollbar-track-color: transparent;
}

/* ---- Semantic roles (dark) ---- */
body.dark,
.dark,
[data-theme="dark"] {
  --cue-main-background: var(--cue-color-darkgray);
  --cue-main-foreground: var(--cue-color-white);

  --cue-default: var(--cue-color-black);
  --cue-defaultContrast: var(--cue-color-ultralightgray);
  --cue-neutral: var(--cue-color-midgray);
  --cue-neutralContrast: var(--cue-color-white);

  --cue-border-color: var(--cue-color-darkmidgray);
  --cue-scrollbar-thumb-color: var(--cue-color-darkmidgray);

  color-scheme: dark;
}