/* ============================================================
   Cue — Interactive component tokens
   Switch, input and menu/popover variables, carried over from
   @qaecy/cue-ui so primitives theme correctly in light & dark.
   ============================================================ */

:root {
  /* ---- Switch ---- */
  --cue-input-switch-background: var(--cue-color-midgray);
  --cue-input-switch-indicator-background: var(--cue-color-white);
  --cue-input-switch-indicator-foreground: var(--cue-color-black);
  --cue-input-switch-focus-color: var(--cue-color-white);
  --cue-input-switch-checked-background: var(--cue-color-darkblue);
  --cue-input-switch-checked-indicator-background: var(--cue-color-white);
  --cue-input-switch-checked-indicator-foreground: var(--cue-color-black);
  --cue-input-switch-disabled-background: var(--cue-color-midgray);
  --cue-input-switch-disabled-indicator-background: var(--cue-color-lightgray);
  --cue-input-switch-disabled-indicator-foreground: var(--cue-color-midgray);

  /* ---- Input ---- */
  --cue-input-value-color: var(--cue-main-foreground);
  --cue-input-label-color: var(--cue-main-foreground);
  --cue-input-border-color: var(--cue-border-color);
  --cue-input-border-bottom-color: var(--cue-main-foreground);
  --cue-input-placeholder-color: var(--cue-color-darkmidgray);

  /* ---- Menu / popover ---- */
  --cue-menu-padding-x: 0.5em;
  --cue-menu-padding-y: 0.5em;
  --cue-menu-gap: 0.5em;
  --cue-menu-background-color: var(--cue-color-white);
  --cue-menu-foreground-color: var(--cue-color-black);
  --cue-menu-border-color: var(--cue-border-color);
  --cue-menu-item-selected-background-color: var(--cue-color-lightgray);
  --cue-menu-item-focus-background-color: var(--cue-color-ultralightgray);
  --cue-menu-item-border-radius: 0.9375em;

  /* ---- Chip delete affordance ---- */
  --cue-chip-delete-background-color: var(--cue-color-midgray);
  --cue-chip-delete-hover-background-color: var(--cue-color-darkmidgray);
  --cue-chip-delete-icon-color: var(--cue-color-ultralightgray);
}

body.dark,
.dark,
[data-theme="dark"] {
  --cue-input-value-color: var(--cue-color-white);
  --cue-input-label-color: var(--cue-color-white);
  --cue-input-border-bottom-color: var(--cue-color-white);
  --cue-input-placeholder-color: var(--cue-color-lightgray);

  --cue-menu-background-color: var(--cue-color-black);
  --cue-menu-foreground-color: var(--cue-color-white);
  --cue-menu-item-selected-background-color: var(--cue-color-midgray);
  --cue-menu-item-focus-background-color: var(--cue-color-darkmidgray);
}