/* Tufte-Tabloid design tokens for the Job-Hunt app.
   Adapted from ~/Documents/scripts/tufte_tabloid_css.py (INDEX_CSS mode).
   Loaded AFTER tailwind.built.css so these values win when they collide.

   Fonts: EB Garamond for body + headings, Libre Baskerville for UI chrome
   (labels, buttons, table headers). System-safe fallbacks in every stack.
*/

:root {
  /* Brand */
  --brand:        #502379;
  --brand-mid:    #6b2f9e;
  --brand-dark:   #3a1858;
  --brand-tint:   #f7f4fb;
  --teal:         #00a0a0;
  --teal-dark:    #007a7a;
  --teal-tint:    #edfafa;

  /* Ink levels */
  --ink:          #1a1a1a;
  --ink-mid:      #3a3a3a;
  --ink-light:    #666666;
  --ink-faint:    #999999;

  /* Rules + backgrounds */
  --rule:         #c8c8c8;
  --rule-light:   #e4e4e4;
  --rule-faint:   #f0f0f0;
  --page:         #fefcf8;
  --cream:        #f8f6f2;
  --cream-dark:   #f2ede4;

  /* Status */
  --emerald:      #2d7a4f;
  --emerald-tint: #eaf4ee;
  --amber:        #b8860b;
  --amber-tint:   #faf3e0;
  --danger:       #c0392b;
  --danger-tint:  #fbeae8;
}

/* ── Body + type ──────────────────────────────────────────────────── */

html, body {
  background: var(--page);
}

body {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.3px;
}
h1 { font-size: 28px; line-height: 1.05; }
h2 { font-size: 20px; font-weight: 500; margin-top: 8px; }
h3 { font-size: 16px; font-weight: 600; }

/* Small caps chrome — labels, section eyebrows, badges */
label > span:first-child,
.eyebrow,
.chrome {
  font-family: 'Libre Baskerville', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-mid);
}

/* ── Palette overrides: swap Tailwind's slate for Tufte ink/cream ─ */
/* Only visual tokens — we keep Tailwind's layout classes untouched. */

.bg-slate-50  { background-color: var(--page) !important; }
.bg-slate-100 { background-color: var(--cream) !important; }
.bg-slate-200 { background-color: var(--cream-dark) !important; }
.bg-white     { background-color: #ffffff !important; }

.text-slate-900 { color: var(--ink) !important; }
.text-slate-800 { color: var(--ink) !important; }
.text-slate-700 { color: var(--ink-mid) !important; }
.text-slate-600 { color: var(--ink-mid) !important; }
.text-slate-500 { color: var(--ink-light) !important; }
.text-slate-400 { color: var(--ink-faint) !important; }
.text-slate-300 { color: var(--ink-faint) !important; }

.border-slate-200 { border-color: var(--rule-light) !important; }
.border-slate-300 { border-color: var(--rule) !important; }

/* Primary action button — darkest slate becomes brand purple */
.bg-slate-900 { background-color: var(--brand) !important; }
.bg-slate-900.hover\:bg-slate-800:hover,
.hover\:bg-slate-800:hover { background-color: var(--brand-dark) !important; }
button.bg-slate-900,
.bg-slate-900 { color: #ffffff !important; }

/* Emerald / red / amber status colors → Tufte muted variants */
.bg-emerald-50 { background-color: var(--emerald-tint) !important; }
.border-emerald-200 { border-color: var(--emerald) !important; opacity: 0.5; }
.text-emerald-900, .text-emerald-800, .text-emerald-700 { color: var(--emerald) !important; }
.bg-emerald-100 { background-color: var(--emerald-tint) !important; }
.text-emerald-800.bg-emerald-100 { color: var(--emerald) !important; }
.bg-emerald-700 { background-color: var(--emerald) !important; color: #fff !important; }
.hover\:bg-emerald-800:hover { background-color: var(--teal-dark) !important; }

.bg-red-50 { background-color: var(--danger-tint) !important; }
.border-red-200 { border-color: var(--danger) !important; opacity: 0.5; }
.text-red-900, .text-red-800, .text-red-700 { color: var(--danger) !important; }
.bg-red-100 { background-color: var(--danger-tint) !important; }
.bg-red-700, .bg-red-600 { background-color: var(--danger) !important; color: #fff !important; }
.hover\:bg-red-800:hover, .hover\:bg-red-50:hover { background-color: var(--danger-tint) !important; }

.bg-amber-50 { background-color: var(--amber-tint) !important; }
.border-amber-200 { border-color: var(--amber) !important; opacity: 0.5; }
.text-amber-900, .text-amber-800 { color: var(--amber) !important; }

/* ── Links ───────────────────────────────────────────────────────── */

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
a.hover\:no-underline:hover { text-decoration: none; }
a.underline { text-decoration: underline; }

/* ── Inputs ──────────────────────────────────────────────────────── */

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], input[type="tel"],
input[type="file"], textarea, select {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--rule);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

/* Buttons default to Libre Baskerville small caps */
button {
  font-family: 'Libre Baskerville', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Preserve monospace where explicitly requested */
pre, code, .font-mono, kbd, samp {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
}

/* ── Table styling for kanban / lists ────────────────────────────── */

pre {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14px;
  color: var(--ink-mid);
  line-height: 1.55;
}

/* Details / summary — used on facts list */
details summary { cursor: pointer; }
details[open] summary { color: var(--brand); }

/* ── Header bar restraint ────────────────────────────────────────── */

header h1 { font-weight: 500; }
header p { font-family: 'EB Garamond', Georgia, serif; }

/* ── Global chrome: top bar with brand + primary nav ───────────── */

.jh-topbar {
  border-bottom: 2px solid var(--brand);
  background: #ffffff;
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: -24px -16px 16px;
}
.jh-brand {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--brand);
  letter-spacing: -0.3px;
}
.jh-brand em { color: var(--ink); font-style: italic; font-weight: 400; }
.jh-nav {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: 'Libre Baskerville', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.jh-nav a { color: var(--ink-light); }
.jh-nav a:hover { color: var(--brand); text-decoration: none; }
.jh-nav a.active { color: var(--brand); border-bottom: 1px solid var(--brand); }

/* ── Hub tiles: tighter grid, EB Garamond titles, warm hover ─── */

.grid a.rounded-lg.border {
  transition: border-color .12s, background .12s;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.grid a.rounded-lg.border:hover {
  border-color: var(--brand);
  background: var(--brand-tint) !important;
}
.grid a.rounded-lg.border p.text-sm.font-semibold {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  font-size: 15px;
}

/* ── Section cards: white background over cream page ─────────── */

section.rounded-lg.border { background: #ffffff !important; }

/* ── Pipeline kanban ─────────────────────────────────────────── */

section.rounded-lg h2.uppercase {
  font-family: 'Libre Baskerville', serif;
  color: var(--brand);
  letter-spacing: 0.06em;
}
ul li a.rounded-md.border { transition: border-color .12s; }
ul li a.rounded-md.border:hover { border-color: var(--brand); }
ul li a.rounded-md.border p.font-medium {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
}

/* Score / status chips → editorial small caps */
.rounded-full.px-2, .rounded.px-1\.5 {
  font-family: 'Libre Baskerville', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ── Long-form content: rule-left indent for posting body / gaps ── */

pre.whitespace-pre-wrap {
  border-left: 3px solid var(--rule);
  padding-left: 12px;
  background: transparent !important;
  color: var(--ink) !important;
}