/* ThreadClarity app — Signal design tokens (align with marketing site.css)
   Loaded after app.css. Remaps existing vars + hard-coded teal/neon chrome. */

:root {
  /* Signal palette (marketing) */
  --signal: #2554E6;
  --signal-deep: #1E3FAF;
  --signal-soft: #E8EEFF;
  --paper: #F3F4F7;
  --paper-2: #EAECEF;
  --ink: #141820;
  --ink-soft: #4B5563;
  --ink-mute: #6B7280;
  --line: rgba(18, 22, 30, 0.10);
  --line-strong: rgba(18, 22, 30, 0.16);

  /* Remap app tokens → Signal (dark shell keeps zinc surfaces) */
  --text-link: #7B9CFF;
  --accent-blue: #2554E6;
  --accent-purple: #2554E6;
  --accent-cyan: #1E3FAF;
  --accent-dim: rgba(37, 84, 230, 0.12);
  --accent-glow: rgba(37, 84, 230, 0.28);
  --brand-green: #2554E6;
  --brand-blue: #7B9CFF;
  --status-info: #7B9CFF;
  --border-accent: rgba(37, 84, 230, 0.22);

  --font-sans: 'Outfit', 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(20, 24, 32, 0.35);
  --shadow-md: 0 8px 24px rgba(20, 24, 32, 0.45);
  --shadow-lg: 0 18px 48px rgba(20, 24, 32, 0.55);
}

[data-theme="light"] {
  --bg-primary: #F3F4F7;
  --bg-secondary: #EAECEF;
  --bg-tertiary: #E2E5EB;
  --bg-card: #FFFFFF;
  --bg-hover: #E8EEFF;
  --bg-active: #D6E0FF;

  --border-default: rgba(18, 22, 30, 0.10);
  --border-muted: rgba(18, 22, 30, 0.06);
  --border-accent: rgba(37, 84, 230, 0.22);
  --border-strong: rgba(18, 22, 30, 0.16);

  --text-primary: #141820;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-link: #1E3FAF;

  --accent-blue: #2554E6;
  --accent-purple: #2554E6;
  --accent-cyan: #1E3FAF;
  --accent-dim: rgba(37, 84, 230, 0.08);
  --accent-glow: rgba(37, 84, 230, 0.18);
  --brand-green: #2554E6;
  --brand-blue: #2554E6;
  --status-info: #2554E6;

  --shadow-sm: 0 1px 3px rgba(20, 24, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 24, 32, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 24, 32, 0.10);
  --surface: rgba(37, 84, 230, 0.03);
}

/* Base atmosphere (Signal paper wash in light) */
[data-theme="light"] body {
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(37, 84, 230, 0.10), transparent 60%),
    linear-gradient(180deg, #EEF1F6 0%, var(--paper) 28%, var(--paper) 100%);
}

[data-theme="light"] body::after { opacity: 0; }

::selection { background: rgba(37, 84, 230, 0.22); }
[data-theme="light"] ::selection { background: rgba(37, 84, 230, 0.18); }

/* Header / brand */
#app-header {
  background: rgba(9, 9, 11, 0.78);
}
[data-theme="light"] #app-header {
  background: rgba(243, 244, 247, 0.86);
  border-bottom-color: var(--line);
}

.header-brand h1 {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.header-subtitle {
  letter-spacing: 0.02em;
}

.wordmark-thread { color: var(--text-primary); }
.wordmark-clarity { color: var(--signal); }
[data-theme="light"] .wordmark-thread { color: var(--ink); }
[data-theme="light"] .wordmark-clarity { color: var(--signal); }

/* Nav steps */
.nav-btn.active {
  background: var(--signal);
  color: #fff;
}
[data-theme="light"] .nav-btn.active {
  background: var(--signal);
  color: #fff;
}
.nav-btn.active .nav-num {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}

/* Buttons */
.btn-primary {
  background: var(--signal);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(37, 84, 230, 0.22);
}
[data-theme="light"] .btn-primary {
  background: var(--signal);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--signal-deep);
  box-shadow: 0 12px 28px rgba(37, 84, 230, 0.28);
}

.skip-link {
  background: var(--signal);
  color: #fff;
}

/* Cards / surfaces */
[data-theme="light"] .section-card,
[data-theme="light"] .threads-stats-bar {
  background: var(--bg-card);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}

/* Focus / interactive teal → signal */
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: rgba(37, 84, 230, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 84, 230, 0.12);
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.path-input:focus {
  border-color: rgba(37, 84, 230, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 84, 230, 0.12);
}

.tab-btn.active,
.input-mode-tabs .tab-btn.active {
  border-color: rgba(37, 84, 230, 0.45);
  background: rgba(37, 84, 230, 0.08);
  color: var(--text-primary);
}

.progress-fill,
.progress-bar-fill {
  background: linear-gradient(90deg, var(--signal), var(--signal-deep));
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Hard-coded teal leftovers → signal */
.badge-success,
.tag-ai,
.credit-badge,
.status-pill.active,
.chip-selected {
  background: rgba(37, 84, 230, 0.14);
  color: var(--signal);
  border-color: rgba(37, 84, 230, 0.35);
}

[data-theme="light"] .credit-badge,
[data-theme="light"] a.muted-link:hover {
  color: var(--signal-deep);
}

/* Billing / plan accents */
.plan-card.featured,
.plan-card.selected {
  border-color: rgba(37, 84, 230, 0.4);
}
.plan-card.featured {
  box-shadow: 0 0 0 1px rgba(37, 84, 230, 0.25);
}
.plan-badge {
  background: rgba(37, 84, 230, 0.14);
  color: var(--signal);
}

/* Auth / secondary neon washes */
.auth-panel,
.drop-zone.dragover,
.drop-zone:hover {
  border-color: rgba(37, 84, 230, 0.35);
}
.drop-zone.dragover {
  background: rgba(37, 84, 230, 0.08);
}

/* Keep status green/red semantic; only brand chrome is Signal */
.accent-wash {
  background: rgba(37, 84, 230, 0.08);
}