/* Porchlight light (default) and Porchlight dark, with their own fonts. */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-style: normal; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2'); }

html[data-theme="porchlight"] {
  --bg: #f6f1e6;
  --surface: #fffdf8;
  --text: #1b1740;
  --muted: #5c5784;
  --accent: #07796e;
  --accent-2: #e8404f;
  --accent-3: #5a49e0;
  --gold: #f2b01e;
  --strong: #1b1740;
  --on-strong: #fffdf8;
  --on-accent: #ffffff;
  --on-gold: #1b1740;
  --line: #ddd5c2;
  --line-strong: #1b1740;
  --me-bg: rgba(7, 121, 110, 0.1);
  --header-bg: #fffdf8;
  --r: 0;
  --shadow-btn: 4px 4px 0 var(--accent);
  --shadow-btn-alt: 4px 4px 0 var(--accent-2);
  --shadow-card: 6px 6px 0 var(--accent-2);
  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-mono: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
html[data-theme="overprint"] {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

/* Shared type and detail for both Porchlight themes */
html[data-theme="porchlight"] body, html[data-theme="overprint"] body { font-size: 16px; line-height: 1.6; }
html[data-theme="porchlight"] .h1, html[data-theme="overprint"] .h1 { letter-spacing: -0.02em; }
html[data-theme="porchlight"] .h2, html[data-theme="overprint"] .h2,
html[data-theme="porchlight"] .h3, html[data-theme="overprint"] .h3 { letter-spacing: -0.01em; }
html[data-theme="porchlight"] .h3, html[data-theme="overprint"] .h3 { font-size: 16px; }
html[data-theme="porchlight"] .btn, html[data-theme="overprint"] .btn { font: 700 13.5px var(--font-display); letter-spacing: 0.06em; }
html[data-theme="porchlight"] .brand-name, html[data-theme="overprint"] .brand-name { letter-spacing: 0.1em; }
html[data-theme="porchlight"] .brand-sub, html[data-theme="overprint"] .brand-sub { font-weight: 600; letter-spacing: 0.26em; }
html[data-theme="porchlight"] .kicker, html[data-theme="overprint"] .kicker,
html[data-theme="porchlight"] .lbl, html[data-theme="overprint"] .lbl { font-weight: 600; letter-spacing: 0.16em; }
html[data-theme="porchlight"] .nav a, html[data-theme="overprint"] .nav a,
html[data-theme="porchlight"] .navbtn, html[data-theme="overprint"] .navbtn { font-weight: 500; }
html[data-theme="porchlight"] .chip, html[data-theme="overprint"] .chip,
html[data-theme="porchlight"] .tab, html[data-theme="overprint"] .tab,
html[data-theme="porchlight"] .mini, html[data-theme="overprint"] .mini { font-weight: 600; font-size: 12.5px; }
html[data-theme="porchlight"] .dcat, html[data-theme="overprint"] .dcat { font-weight: 600; }
html[data-theme="porchlight"] code, html[data-theme="overprint"] code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.92em; }

/* Light-only details */
html[data-theme="porchlight"] .site-header { border-bottom: 2px solid var(--text); }
html[data-theme="porchlight"] .site-footer { border-top: 2px solid var(--text); }
html[data-theme="porchlight"] .mis { color: var(--accent-2); text-shadow: 3px 3px 0 var(--text); }
html[data-theme="porchlight"] .scorebig { color: var(--accent-2); text-shadow: 3px 3px 0 var(--text); }
html[data-theme="porchlight"] .box, html[data-theme="porchlight"] .gcard, html[data-theme="porchlight"] .dcard,
html[data-theme="porchlight"] .cat, html[data-theme="porchlight"] .band, html[data-theme="porchlight"] .mybox,
html[data-theme="porchlight"] .pod { border-color: var(--text); }
html[data-theme="porchlight"] .feature { border: 2px solid var(--text); }
html[data-theme="porchlight"] .gframe-wrap, html[data-theme="porchlight"] .gframe { background: #12102b; }
html[data-theme="porchlight"] .gframe-wrap { border-color: var(--text); }
html[data-theme="porchlight"] .btn.alt { background: var(--surface); border-color: var(--text); }
html[data-theme="porchlight"] .btn:hover:not(:disabled), html[data-theme="porchlight"] .nav a.btn:hover { color: var(--on-strong); }
html[data-theme="porchlight"] .btn.alt:hover:not(:disabled) { color: var(--text); }
html[data-theme="porchlight"] a:hover { color: #045a52; }
html[data-theme="porchlight"] .chip:hover { border-color: var(--text); color: var(--text); }
html[data-theme="porchlight"] .tags span { border-color: var(--line-strong); }
html[data-theme="porchlight"] .pill.good { background: var(--gold); color: var(--on-gold); }
html[data-theme="porchlight"] .form input[type=text], html[data-theme="porchlight"] .form input[type=number],
html[data-theme="porchlight"] .form input[type=email], html[data-theme="porchlight"] .form input[type=password],
html[data-theme="porchlight"] .search input { background: #fff; border-color: var(--text); color: var(--text); }
html[data-theme="porchlight"] .theme.on, html[data-theme="porchlight"] .theme:has(input:checked) { border-color: var(--text); box-shadow: 4px 4px 0 var(--accent); }

.foot nav form.inline { display: inline; }
.foot .navbtn { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.foot .navbtn:hover { color: var(--text); }
html[data-theme="porchlight"] .rk, html[data-theme="porchlight"] .pod .rk { color: #a86d00; }