/* ─── IDEA ENGINE: THEME TOKENS ──────────────────────────────────────────── */

/* Light mode (default) — Square palette */
:root {
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;
  --text-placeholder: #9ca3af;
  --border: #e5e7eb;
  --border-hover: #d1d5db;
  --bg-page: #f9fafb;
  --bg-card: #ffffff;
  --bg-inset: #f3f4f6;
  --bg-sidebar: #ffffff;
  --bg-topbar: #ffffff;
  --positive: #059669;
  --positive-bg: #ecfdf5;
  --negative: #dc2626;
  --negative-bg: #fef2f2;
  --accent: #2563eb;
  --accent-bg: #eff6ff;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --info: #0284c7;
  --info-bg: #f0f9ff;
}

/* Dark mode — mapped from current dark theme */
html.dark {
  --text-primary: #e8e6e3;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --text-placeholder: #4b5563;
  --border: #2a2a35;
  --border-hover: #3a3a48;
  --bg-page: #0a0a0c;
  --bg-card: #131318;
  --bg-inset: #1a1a22;
  --bg-sidebar: #0f0f14;
  --bg-topbar: #131318;
  --positive: #4a9e6e;
  --positive-bg: rgba(74, 158, 110, 0.12);
  --negative: #ef4444;
  --negative-bg: rgba(239, 68, 68, 0.12);
  --accent: #60a5fa;
  --accent-bg: rgba(96, 165, 250, 0.12);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.12);
}

/* ─── TOOLTIP STYLES ─────────────────────────────────────────────────────── */

.has-tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--text-tertiary);
}

.has-tip .tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  width: 300px;
  z-index: 100;
}

.has-tip:hover .tip {
  display: block;
}

.has-tip .tip .tt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  font-weight: 600;
}

/* ─── FOCUS / OUTLINE RESET ──────────────────────────────────────────────── */

/* Remove default blue outlines on all interactive elements */
a:focus,
button:focus,
select:focus,
input:focus,
[tabindex]:focus {
  outline: none;
}

/* Keyboard-only focus ring (visible when tabbing, hidden on click) */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--border-hover);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── TRANSITIONS ────────────────────────────────────────────────────────── */

.sidebar-transition {
  transition: left 0.2s ease-in-out;
}

/* ─── SKIP LINK ──────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: var(--accent);
  color: #ffffff;
  z-index: 200;
  font-size: 14px;
  font-weight: 500;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}