/* ==========================================================
   Jeffrey Site Kit — core.css (every site loads this)
   Tokens, base, required pieces, accessibility.
   Per site: change only the SITE ACCENT block.
   Separation order: color band > border > spacing.
   ========================================================== */

:root {
  /* SITE ACCENT — the only part each site changes */
  --accent: #9a5a06;
  --accent-ink: #ffffff;        /* text on accent */
  --accent-tint: #fbf2e3;       /* section bands, highlights */
  --accent-line: #e3c088;       /* accent borders */

  /* Color strength: raise/lower to taste per site */
  --band: var(--accent-tint);   /* alternate section background */

  /* Neutrals */
  --bg: #ffffff;
  --surface: #f4f6f8;
  --line: #d6dbe1;              /* default borders: visible, not faint */
  --text: #14171a;
  --text-muted: #555d67;

  /* Status */
  --ok: #15803d;   --ok-tint: #e6f5ea;
  --warn: #b45309; --warn-tint: #fdf1e2;
  --info: #4b5563; --info-tint: #eef0f2;
  --bad: #b91c1c;  --bad-tint: #fdeaea;

  /* Type: system font (fast, native everywhere) */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --size-small: 0.8125rem;   /* sources, captions */
  --size-body: 1rem;         /* 16px minimum */
  --size-head: clamp(1.375rem, 3.2vw, 1.875rem);
  --size-title: clamp(1.75rem, 5vw, 2.5rem);

  /* Compact spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px;
  --radius: 10px;
  --border: 1px solid var(--line);
  --border-strong: 2px solid var(--accent-line);
  --max: 1080px;
  --tap: 44px;
}

/* Dark mode: same structure, deeper tints */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #f0b44c; --accent-ink: #0b0d10;
    --accent-tint: #251d10; --accent-line: #6b4f1f;
    --bg: #0f1115; --surface: #171b22; --line: #2e3540;
    --text: #eef0f3; --text-muted: #a2abb6;
    --ok: #4ade80; --ok-tint: #12261a;
    --warn: #fbbf24; --warn-tint: #2a2110;
    --info: #a3acb8; --info-tint: #1e232b;
    --bad: #f87171; --bad-tint: #2c1515;
  }
}
:root[data-theme="dark"] {
  --accent: #f0b44c; --accent-ink: #0b0d10;
  --accent-tint: #251d10; --accent-line: #6b4f1f;
  --bg: #0f1115; --surface: #171b22; --line: #2e3540;
  --text: #eef0f3; --text-muted: #a2abb6;
  --ok: #4ade80; --ok-tint: #12261a;
  --warn: #fbbf24; --warn-tint: #2a2110;
  --info: #a3acb8; --info-tint: #1e232b;
  --bad: #f87171; --bad-tint: #2c1515;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--size-body)/1.5 var(--font);
  min-height: 100vh; display: flex; flex-direction: column;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s3); }
h1 { font-size: var(--size-title); letter-spacing: -0.02em; }
h2 { font-size: var(--size-head); }
h3 { font-size: var(--size-body); }
p { margin: 0 0 var(--s3); max-width: 70ch; }
main { flex: 1; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 768px) { .wrap { padding: 0 var(--s6); } }

/* Sections: separated by color bands, compact */
.section { padding: var(--s6) 0; }
.section.band { background: var(--band); border-block: var(--border); }
.section > .wrap > h2:first-child { margin-bottom: var(--s4); }

.muted { color: var(--text-muted); }
.small { font-size: var(--size-small); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s5);
  border-radius: var(--radius); border: 2px solid var(--accent);
  font: 600 var(--size-small)/1 var(--font); text-decoration: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
}
.btn:hover { filter: brightness(1.08); }
.btn.quiet { background: transparent; color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- Required piece 1: source line under numbers ---------- */
.source { display: block; font-size: var(--size-small); color: var(--text-muted); margin-top: var(--s2); }
.source a { color: inherit; }
.source a:hover { color: var(--accent); }

/* ---------- Required piece 2: footer with portfolio link ---------- */
.site-footer {
  background: var(--surface); border-top: var(--border-strong);
  padding: var(--s5) 0; font-size: var(--size-small); color: var(--text-muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }