/*
  ClickUp-flavored design tokens, distilled for a small internal tool.
  Source: clickup_frontend/libs/theme (_css-variables, _variables, _typography,
  _status, _toggle-switch, _avatar, _popover, _reset). Light theme only,
  no build step, no external fonts. Safe to copy/trim further.
*/

:root {
  /* Brand */
  --cu-purple: #7b68ee;
  --cu-purple-dark: #5f48ea;
  --cu-purple-light: #dfdbfb;

  /* Gray scale (ClickUp's grey-50..1100) */
  --cu-gray-50: #f7f8f9;
  --cu-gray-100: #f0f1f3;
  --cu-gray-200: #e8eaed;
  --cu-gray-300: #d6d9de;
  --cu-gray-400: #adb3bd;
  --cu-gray-500: #87909e;
  --cu-gray-600: #656f7d;
  --cu-gray-700: #4f5762;
  --cu-gray-800: #3c414a;
  --cu-gray-900: #30353c;

  /* Semantic colors */
  --cu-success: #24b04b;
  --cu-success-bg: #dcf2e2;
  --cu-warn: #f8ae00;
  --cu-warn-bg: #fef2d6;
  --cu-error: #e04f44;
  --cu-error-bg: #fae3e1;
  --cu-info: #4194f6;
  --cu-info-bg: #e4e9ff;

  /* Surfaces / backgrounds (light theme) */
  --cu-bg-page: #fafbfc;
  --cu-bg-surface: #ffffff;
  --cu-bg-subtle: #f4f5f5;
  --cu-border: #e9ebf0;
  --cu-border-strong: #d8d8d8;

  /* Text */
  --cu-text-primary: #343434;
  --cu-text-secondary: #7c828d;
  --cu-text-placeholder: #ababab;
  --cu-text-on-brand: #ffffff;

  /* Spacing scale (4px base, matches ClickUp's dense component sizing) */
  --cu-space-1: 4px;
  --cu-space-2: 8px;
  --cu-space-3: 12px;
  --cu-space-4: 16px;
  --cu-space-5: 24px;
  --cu-space-6: 32px;

  /* Border radius scale (from --cu-radii-*) */
  --cu-radius-1: 3px;
  --cu-radius-2: 4px;
  --cu-radius-3: 6px;
  --cu-radius-4: 8px;
  --cu-radius-full: 999px;

  /* Shadows (from popover/menu elevation) */
  --cu-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  --cu-shadow-md: 0 5px 10px rgba(0, 0, 0, 0.2);

  /* Typography */
  --cu-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', roboto,
    'Helvetica Neue', helvetica, arial, sans-serif;
  --cu-font-size-xs: 11px;
  --cu-font-size-sm: 12px;
  --cu-font-size-md: 14px;
  --cu-font-size-lg: 16px;
  --cu-font-size-xl: 22px;
  --cu-font-weight-regular: 400;
  --cu-font-weight-medium: 500;
  --cu-font-weight-semibold: 600;
}

/* ---------- base ---------- */

body {
  font-family: var(--cu-font-family);
  font-size: var(--cu-font-size-md);
  color: var(--cu-text-primary);
  background: var(--cu-bg-page);
}

/* ---------- buttons ---------- */

.cu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cu-space-2);
  height: 32px;
  padding: 0 var(--cu-space-3);
  border-radius: var(--cu-radius-1);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--cu-font-size-md);
  font-weight: var(--cu-font-weight-medium);
  cursor: pointer;
  background: var(--cu-bg-surface);
  color: var(--cu-text-primary);
  border-color: var(--cu-border-strong);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cu-btn:hover {
  background: var(--cu-bg-subtle);
}

.cu-btn-primary {
  background: var(--cu-purple);
  border-color: var(--cu-purple);
  color: var(--cu-text-on-brand);
}

.cu-btn-primary:hover {
  background: var(--cu-purple-dark);
  border-color: var(--cu-purple-dark);
}

.cu-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cu-text-secondary);
}

.cu-btn-ghost:hover {
  background: var(--cu-bg-subtle);
  color: var(--cu-text-primary);
}

/* ---------- inputs / selects ---------- */

.cu-input,
.cu-select {
  height: 32px;
  padding: 0 var(--cu-space-3);
  border-radius: var(--cu-radius-1);
  border: 1px solid var(--cu-border-strong);
  background: var(--cu-bg-surface);
  color: var(--cu-text-primary);
  font-family: inherit;
  font-size: var(--cu-font-size-md);
}

.cu-input::placeholder {
  color: var(--cu-text-placeholder);
}

.cu-input:focus,
.cu-select:focus {
  outline: none;
  border-color: var(--cu-purple);
  box-shadow: 0 0 0 3px var(--cu-purple-light);
}

/* ---------- card ---------- */

.cu-card {
  background: var(--cu-bg-surface);
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-4);
  box-shadow: var(--cu-shadow-sm);
  padding: var(--cu-space-4);
}

/* ---------- status pill ---------- */

.cu-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  padding: 0 var(--cu-space-3);
  border-radius: var(--cu-radius-1);
  font-size: var(--cu-font-size-xs);
  font-weight: var(--cu-font-weight-medium);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cu-text-on-brand);
  background: var(--cu-purple);
}

.cu-pill-success { background: var(--cu-success-bg); color: var(--cu-success); }
.cu-pill-warn    { background: var(--cu-warn-bg);    color: var(--cu-warn); }
.cu-pill-error   { background: var(--cu-error-bg);   color: var(--cu-error); }
.cu-pill-info    { background: var(--cu-info-bg);    color: var(--cu-info); }

/* ---------- toggle switch ---------- */

.cu-toggle { position: relative; display: inline-block; width: 34px; height: 20px; }
.cu-toggle input { opacity: 0; width: 0; height: 0; }

.cu-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: var(--cu-gray-400);
  border-radius: var(--cu-radius-full);
  cursor: pointer;
  transition: background-color 0.2s;
}

.cu-toggle-slider::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--cu-bg-surface);
  border-radius: 50%;
  transition: transform 0.2s;
}

.cu-toggle input:checked + .cu-toggle-slider { background-color: var(--cu-purple); }
.cu-toggle input:checked + .cu-toggle-slider::before { transform: translateX(14px); }

/* ---------- combobox ---------- */

.cu-combobox {
  position: relative;
  display: inline-block;
}

.cu-combobox .cu-input {
  width: 100%;
}

.cu-combobox-menu {
  position: absolute;
  top: calc(100% + var(--cu-space-1));
  left: 0;
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cu-bg-surface);
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius-3);
  box-shadow: var(--cu-shadow-md);
  z-index: 100;
  padding: var(--cu-space-1) 0;
}

.cu-combobox-option {
  padding: var(--cu-space-2) var(--cu-space-3);
  font-size: var(--cu-font-size-md);
  color: var(--cu-text-primary);
  cursor: pointer;
}

.cu-combobox-option:hover,
.cu-combobox-option[aria-selected='true'] {
  background: var(--cu-purple-light);
}