/* Dark theme + theme toggle, shared by every page.
   Existing tokens are NOT renamed. The light palette is untouched; everything here
   is scoped to html[data-theme="dark"] unless it is the toggle itself.
   Dark palette = the same navy/gold brand at night.

   Contrast (WCAG 2.x, computed against the surfaces below):
     --d-text     #E5E9F0 on #101C2E  13.0:1   on #0B1422 14.4:1
     --d-muted    #B8C2D1 on #101C2E   9.1:1   (replaces gray-600/700 text)
     --d-soft     #9AA7BA on #101C2E   6.6:1   (replaces gray-400/500 text)
     gold text    #D4A843 on #101C2E   7.7:1   (replaces gold-600 text)
     linkedin     #70B5F9 on #101C2E   8.0:1
   See Docs/Logs for the full audited table. */

/* The pages never reset the browser's default 8px body margin, which left a visible strip down both sides of
   every full-bleed section (and is what the intermittent pre-paint layout shift in Lighthouse traced back to). */
html, body { margin: 0; }
/* Reserve the scrollbar's width from the first layout. While the HTML is still streaming the page is short, then a vertical
   scrollbar appears and narrows the viewport by ~8px, which re-wrapped the hero and was the intermittent 0.1-0.2 CLS in
   Lighthouse traces (nodes moved ~8px horizontally just before first paint). */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* ---------- toggle (both themes) ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 40px; height: 40px; padding: 0; border-radius: 8px; cursor: pointer;
  color: var(--gold-300); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18); transition: background-color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,0.16); border-color: var(--gold-400); }
.theme-toggle-icon { display: inline-flex; }
.theme-toggle--row {
  width: 100%; height: auto; justify-content: flex-start; padding: 12px 16px;
  font-size: 0.875rem; font-weight: 500; color: #d1d5db; background: transparent; border: 0;
  border-radius: 4px; text-align: left;
}
.theme-toggle--row:hover { background: rgba(255,255,255,0.08); }
/* Phone text is masked and low value; hiding it below 1280px makes room for the toggle. */
@media (max-width: 1279px) { #site-header [data-contact="phone"] { display: none; } }
@media (min-width: 1024px) { .theme-toggle--row { display: none; } }
@media (max-width: 1023px) { #site-header div.shrink-0 .theme-toggle { display: none; } }

/* ---------- dark theme ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --cream: #0B1422;
  --gold-600: #D4A843;
  --gold-50: #1A2740;
  --gold-100: #2B3A56;
  --d-surface: #101C2E;
  --d-raised: #15243A;
  --d-border: #243650;
  --d-text: #E5E9F0;
  --d-muted: #B8C2D1;
  --d-soft: #9AA7BA;
  --linkedin: #70B5F9;
  --linkedin-hover: #A8D1FB;
}

html[data-theme="dark"] body { background: var(--cream); color: var(--d-text); }
/* color-scheme:dark gives unstyled <button>s a grey UA background; :where() keeps this
   at zero specificity so every class-based button style still wins. */
:where(html[data-theme="dark"] button) { background-color: transparent; }
html[data-theme="dark"] ::selection { background: var(--gold-400); color: #0A2342; }

/* Sections hard-coded white inline -> dark surface */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"] { background: var(--d-surface) !important; }

/* Headings and any text that uses navy as its colour on a light surface */
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] [style*="color:var(--navy-900)"]:not(a[href="#main-content"]) { color: var(--d-text) !important; }
/* Calculator tabs: JS writes an inline dark-grey colour onto inactive tabs */
html[data-theme="dark"] .calc-tab[style*="color: rgb(75, 85, 99)"] { color: var(--d-muted) !important; }
html[data-theme="dark"] .section-subheading { color: var(--d-muted); }
html[data-theme="dark"] .prose-p { color: var(--d-muted); }

/* Tailwind-subset greys (the page aliases 400 and 500 to the same value) */
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-500 { color: var(--d-soft); }
html[data-theme="dark"] .text-gray-600 { color: var(--d-muted); }
html[data-theme="dark"] .text-gray-700 { color: #CBD5E1; }
html[data-theme="dark"] .hover\:text-gray-600:hover { color: var(--d-text); }
html[data-theme="dark"] .bg-white { background-color: var(--d-raised); }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--d-border); }
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200 { border-color: var(--d-border); }
html[data-theme="dark"] [style*="background:#F9FAFB"],
html[data-theme="dark"] [style*="background:#F3F4F6"] { background: var(--d-raised) !important; }
html[data-theme="dark"] [style*="background:#E5E7EB"] { background: var(--d-border) !important; }

/* Cards, icon tiles, accordions */
html[data-theme="dark"] .card-base { background: var(--d-raised); border-color: var(--d-border); }
html[data-theme="dark"] .card-depth { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.35); }
html[data-theme="dark"] .card-depth:hover { box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.45); }
html[data-theme="dark"] .svc-accordion { border-color: var(--d-border); }
html[data-theme="dark"] .svc-accordion-body { color: var(--d-muted); }
html[data-theme="dark"] .category-badge { border-color: var(--d-border); }

/* Buttons that assumed a light page */
html[data-theme="dark"] .btn-secondary { color: var(--gold-300); border-color: var(--gold-400); }
html[data-theme="dark"] .btn-secondary:hover { background: var(--gold-400); color: #0A2342; }
html[data-theme="dark"] .section-accordion summary { color: var(--gold-300); border-color: rgba(232,200,116,.35); }
html[data-theme="dark"] .section-accordion summary:hover { color: #0A2342; }

/* Forms */
html[data-theme="dark"] .input-field { background: #0E1A2C; color: var(--d-text); border-color: var(--d-border); }
html[data-theme="dark"] .input-field::placeholder { color: #8391A6; }
html[data-theme="dark"] .label-field { color: var(--d-muted); }
html[data-theme="dark"] input[type=range] { background: var(--d-border); }
html[data-theme="dark"] select.input-field option { background: #0E1A2C; color: var(--d-text); }

/* Floating panels that were white */
html[data-theme="dark"] .resume-menu-list,
html[data-theme="dark"] .site-search-results { background: var(--d-raised); border-color: var(--d-border); }
html[data-theme="dark"] .resume-menu-list a { color: var(--d-text); }
html[data-theme="dark"] .resume-menu-list a + a,
html[data-theme="dark"] .site-search-results a { border-top-color: var(--d-border); }
html[data-theme="dark"] .site-search-result-title { color: var(--d-text); }
html[data-theme="dark"] .resume-menu-list a:hover,
html[data-theme="dark"] .site-search-results a:hover,
html[data-theme="dark"] .site-search-results a:focus-visible,
html[data-theme="dark"] .resume-menu-list a:focus-visible { background: var(--gold-500); }
html[data-theme="dark"] .site-search-results a:hover .site-search-result-title,
html[data-theme="dark"] .site-search-results a:focus-visible .site-search-result-title,
html[data-theme="dark"] .resume-menu-list a:hover,
html[data-theme="dark"] .resume-menu-list a:focus-visible { color: #0A2342; }
html[data-theme="dark"] .section-search input,
html[data-theme="dark"] .section-search-input { background: #0E1A2C; color: var(--d-text); border-color: var(--d-border); }
html[data-theme="dark"] #cookie-banner button.text-gray-500 { color: #4b5563; }

/* Modals: white panel -> raised surface */
html[data-theme="dark"] #template-modal .bg-white,
html[data-theme="dark"] #access-request-modal .bg-white { background-color: var(--d-raised); }

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0B1422; }

/* Blog / FAQ / policy documents */
html[data-theme="dark"] .legal-doc, html[data-theme="dark"] .article-body { color: var(--d-muted); }
html[data-theme="dark"] .legal-doc h1, html[data-theme="dark"] .legal-doc h2, html[data-theme="dark"] .legal-doc h3,
html[data-theme="dark"] .legal-doc strong, html[data-theme="dark"] .article-body h2, html[data-theme="dark"] .article-body h3,
html[data-theme="dark"] .article-body strong { color: var(--d-text); }
html[data-theme="dark"] .legal-doc a, html[data-theme="dark"] .article-body a { color: var(--gold-300); }
html[data-theme="dark"] .legal-doc table, html[data-theme="dark"] .legal-doc th, html[data-theme="dark"] .legal-doc td { border-color: var(--d-border); }

/* Admin page (own small stylesheet) */
html[data-theme="dark"] body > .wrap h1,
html[data-theme="dark"] body > .wrap h2,
html[data-theme="dark"] body > .wrap label,
html[data-theme="dark"] .req-name { color: var(--d-text); }
html[data-theme="dark"] .card { background: var(--d-raised); border-color: var(--d-border); }
html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"] { background: #0E1A2C; color: var(--d-text); border-color: var(--d-border); }
html[data-theme="dark"] .sub, html[data-theme="dark"] .req-email { color: var(--d-soft); }
html[data-theme="dark"] .req-reason { color: var(--d-muted); }
html[data-theme="dark"] .req { border-top-color: var(--d-border); }
html[data-theme="dark"] button.secondary { background: var(--d-border); color: var(--d-text); }
html[data-theme="dark"] button.danger { background: transparent; color: #FCA5A5; border-color: #FCA5A5; }
html[data-theme="dark"] button.danger:hover { background: #B91C1C; color: #fff; }
html[data-theme="dark"] .error { color: #FCA5A5; }

/* ---------- contrast fixes found by the audit ---------- */
/* Light: these greys were #9CA3AF (about 2.4:1 on cream/white). */
html:not([data-theme="dark"]) .locked-note,
html:not([data-theme="dark"]) .masked-contact-note { color: #5B6472; }
html:not([data-theme="dark"]) .resume-menu-list a .resume-count,
html:not([data-theme="dark"]) .site-search-result-meta,
html:not([data-theme="dark"]) .site-search-empty { color: #6B7280; }
/* The footer's "Need full access?" link sits on navy, where LinkedIn's standard blue is too dark. */
footer .locked-secondary-link { color: #70B5F9; }
footer .locked-secondary-link:hover, footer .locked-secondary-link:focus-visible { color: #A8D1FB; }
/* Dark: the cookie banner's Decline is a light button in both themes (UA grey is lost in dark). */
html[data-theme="dark"] #cookie-decline { background-color: #EFEFEF; }
html[data-theme="dark"] .resume-menu-list a .resume-count,
html[data-theme="dark"] .site-search-result-meta,
html[data-theme="dark"] .site-search-empty { color: var(--d-soft); }

/* The ambient canvas scenes drawn in navy (31,58,95) vanish on dark surfaces; invert them to a
   warm light tone. Gold scenes are left alone. (Canvases cache their colour at init, so a filter
   is the one approach that also follows a live theme toggle.) */
html[data-theme="dark"] .scene-navy { filter: invert(1) sepia(0.45) saturate(1.6); }
html[data-theme="dark"] .calc-tab { border-color: var(--d-border); }

/* Blog / legal pages (dark) */
html[data-theme="dark"] [style*="background:#FBFAF7"],
html[data-theme="dark"] [style*="background:#F7F5F0"] { background: var(--cream) !important; }
html[data-theme="dark"] .article-body ul, html[data-theme="dark"] .article-body ol,
html[data-theme="dark"] .article-body li, html[data-theme="dark"] .legal-doc li { color: var(--d-muted); }
html[data-theme="dark"] .article-section + .article-section { border-top-color: var(--d-border); }
html[data-theme="dark"] .legal-doc th { background: var(--d-raised); color: var(--d-text); border-color: var(--d-border); }
html[data-theme="dark"] .legal-doc .coming-soon-note { color: var(--d-text); border-color: rgba(212,168,67,.45); }
html[data-theme="dark"] .legal-doc .legal-updated { color: var(--d-soft); }
html[data-theme="dark"] [style*="color:#A67C20"] { color: var(--gold-300) !important; }
html[data-theme="dark"] .prose-p a { color: var(--gold-300); }
html[data-theme="dark"] .article-card { color: inherit; }

/* Light-mode contrast improvements found by the audit (small, additive) */
html:not([data-theme="dark"]) .legal-doc .legal-updated,
html:not([data-theme="dark"]) .article-card .text-gray-400,
html:not([data-theme="dark"]) .article-section .text-gray-400 { color: #6B7280; }
html:not([data-theme="dark"]) [style*="color:#A67C20"] { color: var(--gold-600) !important; }
footer .text-gray-500, footer .text-gray-400, footer .resume-menu-trigger { color: #9CA3AF; }
#site-header [data-contact="phone"] { color: #9CA3AF; }
/* Blog/legal/FAQ pages still defined the old, lighter gold-600 (#A67C20, 3.5:1); align with the index value. */
html:not([data-theme="dark"]) { --gold-600: #8B6914; }
html:not([data-theme="dark"]) .legal-doc th { color: #5B6472; }

/* Footer lost its 5th column (the placeholder "My Websites" block); not every page ships this utility. */
@media (min-width: 1024px) { footer .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Primary buttons inside document pages keep their navy label (the doc link colour must not recolour them). */
html[data-theme="dark"] .legal-doc a.btn-primary, html[data-theme="dark"] .article-body a.btn-primary { color: #0A2342; }
.legal-doc a.btn-primary { text-decoration: none; }

/* Footer legal links were below the 24px touch-target size and too close together. */
footer nav[aria-label="Legal"] a { display: inline-block; padding: 10px 8px; }