/*
 * Brand design system: dark alpine green / emerald / sage / linen beige.
 * Light theme only (dark mode was removed by request — see the git
 * history if it's ever wanted back, the [data-theme="dark"] variant and
 * its toggle switch lived entirely in this file plus a small block in
 * app-v12.js and one button in index.html).
 *
 * Structure:
 *   1. Canonical design tokens (exact names/values from the brief), in
 *      :root.
 *   2. Aliases from those tokens onto the legacy custom-property names
 *      styles.css/directory.css already use everywhere (--brand, --ink,
 *      --muted, --line, --page, --green, --red, --amber, --blue,
 *      --dir-*) — this is what lets the whole existing app pick up the
 *      new palette without every individual rule being rewritten.
 *   3. A small number of targeted overrides for the handful of spots
 *      that hard-code a color instead of reading a token (documented
 *      inline at each one).
 *
 * No existing rule anywhere else is modified; this file only sets
 * custom-property values and patches hard-coded colors.
 */

:root {
  --color-success: #2a8354;
  --color-error: #d9534f;
  --color-warning: #f0ad4e;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --bg-app: #f7f6f2;
  --bg-surface: #ffffff;
  --border-subtle: #e6e4de;

  --text-primary: #0e2a1b;
  --text-secondary: #4a554a;
  --text-disabled: #8a9388;

  --cta-bg: #0e2a1b;
  --cta-bg-hover: #163f29;
  --cta-bg-active: #081a11;
  --cta-text: #ffffff;
  --cta-disabled-bg: #d0d5ce;
  --cta-disabled-text: #8a9388;

  --table-row-hover: #f0efea;
  --row-selected: #e7f2ec;
  --input-focus-border: #2a8354;
  --input-focus-ring: rgba(42, 131, 84, .18);

  /* Legacy names, aliased so the rest of the app inherits this palette
     without being rewritten rule-by-rule. */
  --brand: var(--cta-bg);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --page: var(--bg-app);
  --green: var(--color-success);
  --red: var(--color-error);
  --amber: var(--color-warning);
  /* No blue in this palette by design (see brief §2/§12: avoid the
     generic blue-SaaS look; informational states get a neutral sage
     treatment instead of an arbitrary extra color). */
  --blue: var(--text-secondary);

  --dir-surface: var(--bg-surface);
  --dir-surface-muted: var(--table-row-hover);
  --dir-surface-sunk: #eae8e1;
  --dir-border: var(--border-subtle);
  --dir-accent: var(--color-success);
  --dir-accent-soft: var(--row-selected);
  --dir-accent-strong: #1f6b44;
}

/*
 * Typography — Inter/tabular numerals for scannable data, per the brief.
 * (Inter is already the app's base font — styles.css's `body` rule — so
 * this only adds tabular-nums for anything numeric-heavy.)
 */
.directory-table td,
.metrics strong,
.summary-cards strong,
.listing-summary strong,
.live-counts strong,
.progress-row,
#progress-percent {
  font-variant-numeric: tabular-nums;
}

/*
 * Restrained radius/shadow scale (brief §1/§11: no oversized cards,
 * shadows used sparingly) — replaces the earlier, rounder pass.
 */
.primary,
.secondary,
.dark-button,
.ghost,
.compact-button {
  border-radius: 8px;
}

.panel {
  border-radius: 6px;
  box-shadow: none;
}

/* Disabled CTA uses explicit disabled colors, not just reduced opacity —
   the brief calls out exact disabled bg/text values. */
.primary:disabled {
  background: var(--cta-disabled-bg);
  color: var(--cta-disabled-text);
  opacity: 1;
}

/*
 * A handful of spots hard-code the old indigo focus-ring color
 * (#6758e81f) instead of reading a token — replaced with the emerald
 * focus ring everywhere it appears.
 */
.form-grid select:focus,
.form-grid input:focus,
.org-attach input:focus,
.org-create-form input:focus,
.login-card input:focus,
.chips-input:focus-within {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* Visible keyboard focus everywhere, not just inside forms (brief §16). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}

/* Selected table rows get a subtle emerald tint (brief §3). */
.directory-table tbody tr:has(.org-check:checked),
.directory-table tbody tr:has(.contact-check:checked) {
  background: var(--row-selected);
}

/*
 * "Informational" tint (Total imports / Total source rows KPI icons,
 * .text-blue) — neutral sage rather than blue, per the brief.
 */
.blue { background: #edebe4; }
.violet { background: var(--dir-accent-soft); }

/*
 * A few more spots in styles.css hard-code the old purple instead of
 * reading a token — same pattern as .blue/.violet above.
 */
.note {
  background: var(--dir-accent-soft);
  border-left-color: var(--dir-accent);
  color: var(--dir-accent-strong);
}
.chip { background: var(--dir-accent-soft); color: var(--dir-accent-strong); }
.chip-remove { color: var(--dir-accent); }
.chip-remove:hover { color: var(--dir-accent-strong); }
.bulk-lookup-columns code { background: var(--dir-accent-soft); color: var(--dir-accent-strong); }
.org-attach-selected { color: var(--dir-accent-strong); }

body { background: var(--page); color: var(--ink); }

/*
 * Navigation — Dark Alpine Green, flat (no gradients per the brief).
 * Sidebar was previously an unrelated dark navy (#191d2c); it's now the
 * brand's own primary color.
 */
.sidebar { background: var(--cta-bg); }
.brand-mark { background: var(--color-success); }

.nav { transition: background .15s ease, color .15s ease; }
.nav:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav.active { background: var(--color-success); color: #fff; }