/* =============================================================================
   TenderCure pearl design tokens + base components
   Loaded before styles.css on every app and auth page. styles.css maps its
   legacy token names (--primary, --navy, --bg, --text-1 ...) onto these.
   ============================================================================= */

:root {
  /* Grounds and surfaces */
  --tc-pearl: #F3F1FF;          /* page ground */
  --tc-surface: #FFFFFF;
  --tc-lilac: #E4DFFF;          /* soft fills, chips */
  --tc-line: #E2DEF7;

  /* Text */
  --tc-ink: #1B1640;            /* text, primary buttons */
  --tc-muted: #57527A;          /* secondary text */
  --tc-violet-text: #5546E0;    /* violet text and links on light grounds */
  --tc-on-ink: #C9C3FF;         /* secondary text on ink */
  --tc-track-on-ink: #2E2860;

  /* Decorative only: glows, gradients, bars. Never text on light grounds (fails AA). */
  --tc-violet: #7B6CFF;
  --tc-cyan: #6FE3F0;
  --tc-mesh: linear-gradient(120deg, #E9E4FF, #C9F4F7 30%, #F1DAFF 60%, #DCD6FF);

  /* Radii */
  --tc-radius-pill: 999px;
  --tc-radius-card: 24px;
  --tc-radius-inner: 16px;

  /* Type */
  --tc-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tc-heading-weight: 500;
  --tc-heading-tracking: -0.045em;

  /* Focus ring */
  --tc-focus-ring: 0 0 0 3px var(--tc-surface), 0 0 0 5px var(--tc-violet-text);

  /* Primary button fill and its label. Ink in light; light violet in dark. */
  --tc-primary: #1B1640;
  --tc-primary-hover: #2E2860;
  --tc-on-primary: #FFFFFF;

  /* Raised surface inside a card (inputs on a card, hover rows) */
  --tc-surface-2: #F3F1FF;

  /* Form-control edges: 3:1 against the surface (--tc-line is decorative) */
  --tc-input-line: #8A84B2;

  /* Second surface (used by knowledge-base.css and bid-workspace.css, previously undefined) */
  --bg-2: var(--tc-pearl);

  color-scheme: light;
}

/* --- Dark theme ---
   theme.js resolves localStorage tc_theme (light | dark | system) to
   html[data-theme] before first paint; system follows the OS. App and auth
   pages read these; pages that do not load theme.js stay light. */
:root[data-theme="dark"] {
  --tc-pearl: #100E26;
  --tc-surface: #191636;
  --tc-surface-2: #221E47;
  --tc-lilac: #2E2A55;
  --tc-line: #2E2A55;

  --tc-ink: #EEEBFF;
  --tc-muted: #B4ADDF;
  --tc-violet-text: #A99CFF;

  --tc-primary: #A99CFF;
  --tc-primary-hover: #C3B9FF;
  --tc-on-primary: #100E26;

  --tc-input-line: #706AA0;

  color-scheme: dark;
}

/* --- Buttons --- */
.tc-btn,
.tc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--tc-radius-pill);
  font-family: var(--tc-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.tc-btn {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
}

.tc-btn:hover {
  background: var(--tc-primary-hover);
  color: var(--tc-on-primary);
}

.tc-btn-secondary {
  background: var(--tc-pearl);
  color: var(--tc-ink);
}

.tc-btn-secondary:hover {
  background: var(--tc-lilac);
  color: var(--tc-ink);
}

.tc-btn:focus-visible,
.tc-btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--tc-focus-ring);
}

.tc-btn:disabled,
.tc-btn-secondary:disabled,
.tc-btn[aria-disabled="true"],
.tc-btn-secondary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Chip --- */
.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-lilac);
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

/* --- Card --- */
.tc-card {
  background: var(--tc-surface);
  color: var(--tc-ink);
  border-radius: var(--tc-radius-card);
  padding: 24px;
  box-sizing: border-box;
}

/* --- Input --- */
.tc-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--tc-input-line);
  border-radius: var(--tc-radius-inner);
  background: var(--tc-surface);
  color: var(--tc-ink);
  font-family: var(--tc-font);
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}

.tc-input::placeholder {
  color: var(--tc-muted);
}

.tc-input:focus,
.tc-input:focus-visible {
  outline: none;
  border-color: var(--tc-violet-text);
  box-shadow: var(--tc-focus-ring);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}