/*
 * ChatClipThat design tokens ("CCT One").
 * One source for every surface: app, marketing, editor, developer site.
 * Pages reference --cct-* tokens; legacy variable names are aliased onto
 * these inside each base layout so older page CSS picks them up.
 */
:root {
  /* Ground: one neutral dark scale */
  --cct-bg: #0b0b12;
  --cct-surface: #13131c;
  --cct-raised: #1b1b28;
  --cct-line: #26263a;
  --cct-line-soft: rgba(255, 255, 255, 0.08);
  --cct-line-strong: rgba(255, 255, 255, 0.14);

  /* Violet, taken from the logo */
  --cct-violet-600: #7c3aed; /* primary action; 5.7:1 with white text */
  --cct-violet-700: #6d28d9; /* primary hover/pressed */
  --cct-violet-400: #a78bfa; /* links, active nav, focus */
  --cct-violet-300: #c4b5fd; /* hover text, badge text */
  --cct-violet-tint: #241a3d; /* selected rows, badges */
  --cct-violet-wash: rgba(124, 58, 237, 0.12); /* hover fills */

  /* Text */
  --cct-text: #f4f3fa;
  --cct-text-2: #a6a3bc;
  --cct-text-3: #85829b; /* >= 4.5:1 on --cct-surface */

  /* Signal */
  --cct-signal: #5eead4; /* ready / live / success */
  --cct-warn: #fbbf24;
  --cct-danger: #f87171;

  /* Evidence lanes */
  --cct-lane-visual: #a78bfa;
  --cct-lane-audio: #5eead4;
  --cct-lane-dialogue: #f4f3fa;
  --cct-lane-combat: #fbbf24;
  --cct-lane-chat: #f472b6;

  /* Type */
  --cct-font: 'Outfit', system-ui, sans-serif;
  --cct-font-mono: 'DM Mono', ui-monospace, 'SF Mono', monospace;

  /* Shape */
  --cct-radius-control: 8px;
  --cct-radius-card: 12px;
  --cct-radius-modal: 20px;
  --cct-radius-pill: 999px;
  --cct-control-height: 44px;
}

/* Shared primitives. Pages opt in by class; nothing here restyles bare elements. */
.cct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--cct-control-height);
  padding: 0 1.25rem;
  border-radius: var(--cct-radius-control);
  border: 1px solid transparent;
  font: 600 0.9375rem/1 var(--cct-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cct-btn--primary {
  background: var(--cct-violet-600);
  color: #ffffff;
}

.cct-btn--primary:hover {
  background: var(--cct-violet-700);
}

.cct-btn--secondary {
  background: var(--cct-raised);
  border-color: var(--cct-line-strong);
  color: var(--cct-text);
  font-weight: 500;
}

.cct-btn--secondary:hover {
  border-color: var(--cct-violet-400);
}

.cct-btn--ghost {
  background: transparent;
  color: var(--cct-violet-400);
  font-weight: 500;
}

.cct-btn--ghost:hover {
  color: var(--cct-violet-300);
}

.cct-btn:focus-visible {
  outline: 2px solid var(--cct-violet-400);
  outline-offset: 2px;
}

.cct-card {
  background: var(--cct-surface);
  border: 1px solid var(--cct-line);
  border-radius: var(--cct-radius-card);
}

.cct-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 26px;
  padding: 0 0.625rem;
  border-radius: var(--cct-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d9d6ea;
  font-size: 0.8125rem;
}

.cct-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--cct-radius-pill);
  background: currentColor;
}

.cct-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.5rem;
  border-radius: var(--cct-radius-pill);
  background: var(--cct-violet-tint);
  color: var(--cct-violet-300);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cct-mono {
  font-family: var(--cct-font-mono);
}

/* Ambient glow blobs: CCT One has no glows, only flat surfaces. */
.rounded-full[class*="blur-"][class*="bg-primary"],
.rounded-full[class*="blur-"][class*="bg-purple"],
.rounded-full[class*="blur-"][class*="bg-indigo"] {
  display: none;
}

/* Tailwind's preflight is off in this app, so form controls kept the browser's
   Arial. They inherit the page font instead; inline font pickers still win. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Machine data reads in DM Mono everywhere. */
code,
pre,
kbd,
samp {
  font-family: var(--cct-font-mono);
}

/* Used by templates but never compiled into tailwind.min.css. */
.text-purple-200 {
  color: var(--cct-violet-300);
}