/* "Tool" theme: light workbench. Loaded on every page after the base stylesheet;
   every rule is scoped under html[data-theme="tool"] so the classic gold-on-slate
   theme is untouched when the attribute is absent (theme.js sets it).
   Vibe: clean SaaS tool (Linear/Attio): white surfaces, Inter, compact tables,
   near-black primary buttons, gold demoted to a brand accent. */

/* ============================================================
   1. Shared variable remap (styles.css and landing.css names)
   ============================================================ */
html[data-theme="tool"] {
  /* app (styles.css) */
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel2: #f3f4f6;
  --border: #e4e7ec;
  --text: #182230;
  --muted: #667085;
  --accent: #9d6b09;       /* gold, darkened for white backgrounds */
  --accent-dim: #e0c98d;
  --good: #1a7f42;
  --warn: #b45309;
  --bad: #c0362c;
  /* landing (landing.css) */
  --bg2: #f6f7f9;
  --ink: #182230;
  --gold: #9d6b09;
  --gold-deep: #d8bc78;
  --ice: #2563eb;
  --serif: 'Inter', 'Segoe UI', system-ui, sans-serif; /* headings go sans in tool mode */
  --sans: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* tool-theme locals */
  --t-primary: #161d29;      /* primary button */
  --t-primary-hover: #27303f;
  --t-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --t-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);
  color-scheme: light;
}

/* ============================================================
   2. App workbench (app.html / admin.html, base: styles.css)
   ============================================================ */
html[data-theme="tool"] body {
  font: 14px/1.5 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header: compact single strip on white */
html[data-theme="tool"] header {
  background: var(--panel);
  padding: 12px 22px 10px;
}
html[data-theme="tool"] .brand-name {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-weight: 650; font-size: 17px; letter-spacing: -0.01em;
}
html[data-theme="tool"] .brand-tag { color: var(--muted); letter-spacing: 1.4px; }
html[data-theme="tool"] .brand-icon { box-shadow: var(--t-shadow-sm); }

/* Tabs: quiet nav row on the gray canvas; active = white card */
html[data-theme="tool"] .tabs {
  background: var(--panel);
  padding: 0 22px; gap: 2px; border-bottom: 1px solid var(--border);
}
html[data-theme="tool"] .tab {
  flex: 0 0 auto; background: transparent; border: none; border-radius: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 11px 14px 12px; font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  color: var(--muted);
}
html[data-theme="tool"] .tab:hover { background: transparent; color: var(--text); border-color: var(--border); }
html[data-theme="tool"] .tab.active { color: var(--text); background: transparent; border-bottom-color: var(--t-primary); }
html[data-theme="tool"] .tab-help {
  color: var(--muted); border-color: var(--border); width: 30px; height: 30px; margin-left: auto;
}
html[data-theme="tool"] .tab-help:hover { background: var(--panel2); color: var(--text); }

/* Panels: white cards, hairline border, whisper of shadow */
html[data-theme="tool"] .panel {
  border-radius: 10px; padding: 16px 18px; box-shadow: var(--t-shadow-sm);
}
html[data-theme="tool"] .panel h2 { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
html[data-theme="tool"] main { padding: 16px 22px 40px; gap: 16px; }

/* Buttons: near-black primary, white secondary */
html[data-theme="tool"] button {
  background: var(--t-primary); color: #fff;
  padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 7px;
}
html[data-theme="tool"] button:hover { background: var(--t-primary-hover); filter: none; }
html[data-theme="tool"] button:disabled { background: #98a2b3; color: #fff; }
html[data-theme="tool"] button.secondary,
html[data-theme="tool"] .close-btn {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--t-shadow-sm);
}
html[data-theme="tool"] button.secondary:hover,
html[data-theme="tool"] .close-btn:hover { background: var(--panel2); filter: none; }
html[data-theme="tool"] a.btn-link {
  background: var(--panel); color: var(--text); border-color: var(--border); box-shadow: var(--t-shadow-sm);
}
html[data-theme="tool"] a.btn-link:hover { background: var(--panel2); filter: none; }
html[data-theme="tool"] .close-btn.close-x:hover { background: rgba(16, 24, 40, 0.05); color: var(--text); }
html[data-theme="tool"] .pick-btn-ghost { background: transparent; border-color: var(--border); }
html[data-theme="tool"] .pick-btn-ghost:hover { background: var(--panel2); border-color: #d0d5dd; }

/* Inputs: white with a focus ring */
html[data-theme="tool"] .field input[type="text"],
html[data-theme="tool"] .field input[type="number"],
html[data-theme="tool"] .field input[type="email"],
html[data-theme="tool"] .field input[type="password"],
html[data-theme="tool"] .field select {
  background: var(--panel); border-color: #d0d5dd; font-size: 13.5px;
}
html[data-theme="tool"] .field input:focus,
html[data-theme="tool"] .field select:focus,
html[data-theme="tool"] .draft-edit input:focus,
html[data-theme="tool"] .draft-edit textarea:focus {
  outline: none; border-color: #98a2b3; box-shadow: 0 0 0 3px rgba(22, 29, 41, 0.08);
}
html[data-theme="tool"] .field label { font-size: 11.5px; font-weight: 550; }

/* Combobox menu */
html[data-theme="tool"] .combo-menu {
  background: var(--panel); box-shadow: var(--t-shadow-md);
}
html[data-theme="tool"] .combo-opt:hover,
html[data-theme="tool"] .combo-opt.active { background: var(--panel2); }

/* Tables: denser, lighter rules */
html[data-theme="tool"] table { font-size: 13px; }
html[data-theme="tool"] th { font-size: 10.5px; letter-spacing: 0.6px; padding: 6px 10px; }
html[data-theme="tool"] td { padding: 7px 10px; border-bottom: 1px solid #eef1f4; }
html[data-theme="tool"] tbody tr:hover { background: #f8f9fb; }
html[data-theme="tool"] .dived-row { background: rgba(26, 127, 66, 0.05); }

/* Score badges: pale tints, readable ink */
html[data-theme="tool"] .score-hi { background: #e8f5ec; color: var(--good); }
html[data-theme="tool"] .score-mid { background: #faf2df; color: var(--accent); }
html[data-theme="tool"] .score-lo { background: #f2f4f7; color: var(--muted); }
html[data-theme="tool"] .dived-tag { background: #e8f5ec; }

/* Links */
html[data-theme="tool"] a { color: #175cd3; }

/* Consoles / drafts: light gray wells instead of black */
html[data-theme="tool"] .log,
html[data-theme="tool"] .email-draft,
html[data-theme="tool"] .draft-edit input,
html[data-theme="tool"] .draft-edit textarea {
  background: #f8f9fb; color: #344054; border-color: var(--border);
}

/* Chips, banners, misc surfaces */
html[data-theme="tool"] .bulk-bar { background: #fbf7ec; }
html[data-theme="tool"] .banner { background: #fbf7ec; }
html[data-theme="tool"] .locked-box { background: #fdf9f0; }
html[data-theme="tool"] .locked-row:hover { background: #fbf7ec; }
html[data-theme="tool"] .outreach-meta { background: var(--panel2); }
html[data-theme="tool"] .outreach-item { background: var(--panel); box-shadow: var(--t-shadow-sm); }
html[data-theme="tool"] .provider-chip { background: var(--panel); }
html[data-theme="tool"] .blur-bar { background: linear-gradient(90deg, #e4e7ec, #f2f4f7); }
html[data-theme="tool"] .row-tip { box-shadow: var(--t-shadow-md); }
html[data-theme="tool"] .toast {
  background: var(--t-primary); color: #fff; border-color: var(--t-primary);
  box-shadow: var(--t-shadow-md);
}
html[data-theme="tool"] .tier-pro { background: #faf2df; }
html[data-theme="tool"] .tier-ultra { background: #e8f5ec; border-color: rgba(26, 127, 66, 0.35); }
html[data-theme="tool"] .value-lock:hover .blur-bar { background: linear-gradient(90deg, #e0c98d, #f2f4f7); }
html[data-theme="tool"] .spinner { border-color: var(--border); border-top-color: var(--t-primary); }
html[data-theme="tool"] .gen { color: var(--text); }
html[data-theme="tool"] .credits { color: var(--muted); }
html[data-theme="tool"] .field-note { font-family: 'Inter', system-ui, sans-serif; }

/* Modals & drawer: soft light scrim, floating white cards */
html[data-theme="tool"] .modal { background: rgba(16, 24, 40, 0.45); }
html[data-theme="tool"] .modal-card { box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22); }
html[data-theme="tool"] .drawer { background: rgba(16, 24, 40, 0.35); }
html[data-theme="tool"] .drawer-content { box-shadow: -12px 0 40px rgba(16, 24, 40, 0.12); }
html[data-theme="tool"] .upgrade-title,
html[data-theme="tool"] .plan-card h3 {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; letter-spacing: -0.02em;
}

/* Plan cards */
html[data-theme="tool"] .plan-card { background: var(--panel); box-shadow: var(--t-shadow-sm); }
html[data-theme="tool"] .plan-card li { border-bottom: 1px dashed var(--border); color: #344054; }
html[data-theme="tool"] .plan-card.hot,
html[data-theme="tool"] .pick-pro {
  background: linear-gradient(180deg, #fdf8ec, var(--panel) 50%);
  box-shadow: 0 8px 28px rgba(157, 107, 9, 0.10);
}
html[data-theme="tool"] .plan-ribbon { background: var(--warn); color: #fff; }
html[data-theme="tool"] .plan-ribbon.ultra { background: var(--good); color: #fff; }
html[data-theme="tool"] .pick-free { background: var(--panel); }
html[data-theme="tool"] .pick-btn-gold { background: var(--t-primary); color: #fff; }
html[data-theme="tool"] .pick-ultra {
  background:
    linear-gradient(180deg, #f0faf3, #fdf8ec 38%, var(--panel) 72%) padding-box,
    conic-gradient(from var(--pick-angle), #d9a441, #1a7f42 30%, #2563eb 55%, #d8bc78 75%, #d9a441) border-box;
  box-shadow: 0 10px 34px rgba(26, 127, 66, 0.12);
}
html[data-theme="tool"] .pick-ultra h3 {
  background: linear-gradient(95deg, #9d6b09, #1a7f42 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="tool"] .pick-btn-ultra { background: var(--t-primary); color: #fff; }

/* Guide panel */
html[data-theme="tool"] .how-panel { border-color: var(--border); }

/* ============================================================
   3. Landing page (index.html, base: landing.css)
   ============================================================ */
/* Scoped to the landing page only (.hero) so the app keeps its flat gray canvas */
html[data-theme="tool"] body:has(.hero) {
  background:
    radial-gradient(1100px 480px at 85% -12%, rgba(157, 107, 9, 0.05), transparent 60%),
    radial-gradient(900px 500px at -12% 30%, rgba(26, 127, 66, 0.03), transparent 55%),
    #fdfdfc;
  color: var(--text);
}

html[data-theme="tool"] nav {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border);
}
html[data-theme="tool"] .nav-links a { color: var(--muted); }
html[data-theme="tool"] .nav-links a:hover { color: var(--text); }
html[data-theme="tool"] .nav-cta { background: var(--t-primary); color: #fff !important; }
html[data-theme="tool"] .nav-cta:hover { background: var(--t-primary-hover); filter: none; }
html[data-theme="tool"] .brand { font-family: 'Inter', system-ui, sans-serif; }

/* Headings: tight sans instead of serif */
html[data-theme="tool"] h1,
html[data-theme="tool"] .section h2,
html[data-theme="tool"] .cta-band h2 {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.025em;
}
html[data-theme="tool"] h1 em { font-style: normal; color: var(--accent); }
html[data-theme="tool"] .step h3,
html[data-theme="tool"] .plan h3,
html[data-theme="tool"] .dossier-name {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-weight: 650; letter-spacing: -0.01em;
}
html[data-theme="tool"] .hero-quote { background: #fbf7ec; border-left-color: #d9a441; }
html[data-theme="tool"] .hero-quote p { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-weight: 500; }
html[data-theme="tool"] .hero-icon { filter: drop-shadow(0 12px 30px rgba(157, 107, 9, 0.22)); }

html[data-theme="tool"] .btn-primary {
  background: var(--t-primary); color: #fff; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.18);
}
html[data-theme="tool"] .btn-primary:hover { background: var(--t-primary-hover); filter: none; }
html[data-theme="tool"] .btn-ghost { background: var(--panel); border-color: #d0d5dd; }
html[data-theme="tool"] .btn-ghost:hover { border-color: #98a2b3; }

/* Hero dossier card: crisp white tool card */
html[data-theme="tool"] .dossier {
  background: var(--panel);
  box-shadow: 0 24px 56px rgba(16, 24, 40, 0.14);
}
html[data-theme="tool"] .meter { background: #eef1f4; }
html[data-theme="tool"] .dossier-signals li { color: #344054; border-bottom: 1px dashed #e7eaf0; }
html[data-theme="tool"] .dossier-photo { background: #f2f4f7; }
html[data-theme="tool"] .dossier-photo::after {
  background: linear-gradient(180deg, transparent 70%, rgba(16, 24, 40, 0.18));
}
html[data-theme="tool"] .dossier-score.tier-green { border-color: rgba(26, 127, 66, 0.4); }
html[data-theme="tool"] .dossier-score.tier-yellow { border-color: rgba(180, 83, 9, 0.4); color: var(--warn); }
html[data-theme="tool"] .dossier-score.tier-diamond {
  color: var(--ice); border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 0 22px rgba(37, 99, 235, 0.16);
}
html[data-theme="tool"] .meter-fill.tier-diamond {
  background: linear-gradient(90deg, #93b4f5, #5f8ff0, var(--ice));
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.35);
}
html[data-theme="tool"] .dossier-dots .dot { background: #d5dae2; }
html[data-theme="tool"] .dossier-dots .dot.active { background: #98a2b3; }
html[data-theme="tool"] .dossier-dots .dot-diamond { background: #e6d3a3; }
html[data-theme="tool"] .dossier-dots .dot-diamond.active { background: #d9a441; box-shadow: 0 0 8px rgba(217, 164, 65, 0.6); }
html[data-theme="tool"] .photo-diamond { filter: drop-shadow(0 0 12px rgba(157, 107, 9, 0.4)); }

/* Bands & cards */
html[data-theme="tool"] .band {
  background: var(--bg2);
  border-color: #ebedf1;
}
html[data-theme="tool"] .step,
html[data-theme="tool"] .signal,
html[data-theme="tool"] .plan {
  background: var(--panel); box-shadow: var(--t-shadow-sm);
}
html[data-theme="tool"] .step:hover,
html[data-theme="tool"] .signal:hover { border-color: #cdd3dc; }
html[data-theme="tool"] .step-num { background: #faf2df; border-color: #e0c98d; }
html[data-theme="tool"] .step-cost { border-top-color: #e7eaf0; }
html[data-theme="tool"] .plan-hot { box-shadow: 0 14px 40px rgba(157, 107, 9, 0.10); border-color: #e0c98d; }
html[data-theme="tool"] .plan-flag { background: var(--warn); color: #fff; }
html[data-theme="tool"] .plan li { color: #344054; border-bottom: 1px dashed #e7eaf0; }

/* Outreach mockups */
html[data-theme="tool"] .outreach-card {
  background: var(--panel); box-shadow: 0 14px 36px rgba(16, 24, 40, 0.08);
}
html[data-theme="tool"] .mock-bar { background: var(--bg2); }
html[data-theme="tool"] .mock-bar span { background: #d5dae2; }
html[data-theme="tool"] .mock-field { border-bottom: 1px dashed #e7eaf0; }
html[data-theme="tool"] .outreach-body { color: #344054; }
html[data-theme="tool"] .mock-btn { background: var(--t-primary); color: #fff; }
html[data-theme="tool"] .call-avatar { background: #e8f5ec; border-color: rgba(26, 127, 66, 0.35); }

/* FAQ, CTA band, footer */
html[data-theme="tool"] details { background: var(--panel); }
html[data-theme="tool"] .cta-band {
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(157, 107, 9, 0.07), transparent 70%),
    var(--panel);
  border-color: #e0c98d;
}
html[data-theme="tool"] footer { background: var(--bg2); }
html[data-theme="tool"] .foot-fine { color: #98a2b3; }

/* ============================================================
   4. Theme toggle button (both pages; visible in classic too,
      so its classic look lives in the base stylesheets)
   ============================================================ */
html[data-theme="tool"] .theme-toggle {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
}
html[data-theme="tool"] .theme-toggle:hover { color: var(--text); background: var(--panel2); }