/* OneSource contrast and theme consistency pass.
   Loaded after the legacy component styles so every page uses a deliberate
   foreground/surface pair. The miniature project illustrations keep their own palettes. */
:root {
  --oa-light-bg: #f4f6f4;
  --oa-light-surface: #ffffff;
  --oa-light-raised: #eaf0ed;
  --oa-light-text: #172521;
  --oa-light-muted: #52635d;
  --oa-light-soft: #64736d;
  --oa-light-border: #c8d2cd;
  --oa-light-accent: #08795d;
  --oa-dark-bg: #0c1315;
  --oa-dark-surface: #141e21;
  --oa-dark-raised: #1c292d;
  --oa-dark-text: #eef5f2;
  --oa-dark-muted: #bfccca;
  --oa-dark-soft: #aebeba;
  --oa-dark-border: #526568;
  --oa-dark-accent: #79e4c2;
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* The animated switch remains intact; remove the mint/neon focus ring. */
.theme-switch:focus-within .theme-switch__container,
.theme-switch__checkbox:focus-visible + .theme-switch__container {
  outline: 1px solid rgba(176, 192, 190, .82) !important;
  outline-offset: 2px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.22), inset 0 1px 2px rgba(0,0,0,.18) !important;
}
.theme-switch:active .theme-switch__container,
.theme-switch__container:active { outline-color: transparent !important; }
.theme-switch, .theme-switch:focus, .theme-switch:active,
.theme-switch__checkbox:focus, .theme-switch__checkbox:focus-visible {
  box-shadow: none !important;
}

/* Base page colors and readable browser-native form controls. */
html[data-theme="light"] body { background: var(--oa-light-bg); color: var(--oa-light-text); }
html[data-theme="dark"] body { background: var(--oa-dark-bg); color: var(--oa-dark-text); }
html[data-theme="light"] input:not([type="checkbox"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select { background: #fff; color: var(--oa-light-text); border-color: var(--oa-light-border); }
html[data-theme="dark"] input:not([type="checkbox"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background: var(--oa-dark-raised); color: var(--oa-dark-text); border-color: var(--oa-dark-border); }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #64736d; opacity: 1; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #b0bfbc; opacity: 1; }

/* AWARDS / RECORDS — restore all typography and chips in light mode. */
html[data-theme="light"] .recognition-page,
html[data-theme="light"] .recognition-main { background: var(--oa-light-bg) !important; color: var(--oa-light-text) !important; }
html[data-theme="light"] .recognition-shell,
html[data-theme="light"] .recognition-section { color: var(--oa-light-text) !important; }
html[data-theme="light"] .recognition-heading h1,
html[data-theme="light"] .recognition-section-head h2,
html[data-theme="light"] .recognition-band-item strong,
html[data-theme="light"] .recognition-card h2,
html[data-theme="light"] .recognition-card h3,
html[data-theme="light"] .recognition-card h4 { color: var(--oa-light-text) !important; opacity: 1 !important; }
html[data-theme="light"] .recognition-heading h1 span,
html[data-theme="light"] .recognition-kicker,
html[data-theme="light"] .recognition-band-item b,
html[data-theme="light"] .recognition-card-top b,
html[data-theme="light"] .recognition-media-mark b,
html[data-theme="light"] .recognition-card-link b { color: var(--oa-light-accent) !important; }
html[data-theme="light"] .recognition-heading p,
html[data-theme="light"] .recognition-section-head p,
html[data-theme="light"] .recognition-band-item small,
html[data-theme="light"] .recognition-band-item span,
html[data-theme="light"] .recognition-card-top,
html[data-theme="light"] .recognition-card p,
html[data-theme="light"] .recognition-card small,
html[data-theme="light"] .recognition-section-index,
html[data-theme="light"] .recognition-more-label { color: var(--oa-light-muted) !important; opacity: 1 !important; }
html[data-theme="light"] .recognition-band-item,
html[data-theme="light"] .recognition-card,
html[data-theme="light"] .recognition-filter,
html[data-theme="light"] .recognition-toolbar { background: var(--oa-light-surface) !important; color: var(--oa-light-text) !important; border-color: var(--oa-light-border) !important; }
html[data-theme="light"] .recognition-card::before { background: linear-gradient(145deg, rgba(20,40,32,.035), transparent 46%) !important; }
html[data-theme="light"] .recognition-card::after { background: linear-gradient(90deg, var(--oa-light-accent), transparent) !important; }
html[data-theme="light"] .recognition-section-index { border-color: #a5b8af !important; }
html[data-theme="light"] .recognition-card-link,
html[data-theme="light"] .recognition-back { color: var(--oa-light-text) !important; }
html[data-theme="light"] .recognition-card-link:hover,
html[data-theme="light"] .recognition-card-link:focus-visible,
html[data-theme="light"] .recognition-back:hover,
html[data-theme="light"] .recognition-back:focus-visible { color: var(--oa-light-accent) !important; }
html[data-theme="light"] .recognition-viewmore { background: var(--oa-light-surface) !important; color: var(--oa-light-text) !important; border-color: var(--oa-light-border) !important; }
html[data-theme="light"] .recognition-viewmore b { color: var(--oa-light-accent) !important; }
html[data-theme="light"] .recognition-viewmore:hover,
html[data-theme="light"] .recognition-viewmore:focus-visible { background: var(--oa-light-raised) !important; color: var(--oa-light-text) !important; border-color: #8b9f95 !important; }
html[data-theme="light"] .recognition-footer { color: var(--oa-light-muted) !important; }
/* Lightbox stays a dark viewing surface in either mode; the controls remain legible. */
.recognition-lightbox-dialog { color: #eef5f2; }
.recognition-lightbox-head { color: #d1ddda !important; }
.recognition-lightbox-head button { color: #eef5f2 !important; }

html[data-theme="dark"] .recognition-page,
html[data-theme="dark"] .recognition-main { background: var(--oa-dark-bg) !important; color: var(--oa-dark-text) !important; }
html[data-theme="dark"] .recognition-heading h1,
html[data-theme="dark"] .recognition-section-head h2,
html[data-theme="dark"] .recognition-band-item strong,
html[data-theme="dark"] .recognition-card h2,
html[data-theme="dark"] .recognition-card h3,
html[data-theme="dark"] .recognition-card h4 { color: var(--oa-dark-text) !important; opacity: 1 !important; }
html[data-theme="dark"] .recognition-heading h1 span,
html[data-theme="dark"] .recognition-kicker,
html[data-theme="dark"] .recognition-band-item b,
html[data-theme="dark"] .recognition-card-top b,
html[data-theme="dark"] .recognition-media-mark b,
html[data-theme="dark"] .recognition-card-link b { color: var(--oa-dark-accent) !important; }
html[data-theme="dark"] .recognition-heading p,
html[data-theme="dark"] .recognition-section-head p,
html[data-theme="dark"] .recognition-band-item small,
html[data-theme="dark"] .recognition-band-item span,
html[data-theme="dark"] .recognition-card-top,
html[data-theme="dark"] .recognition-card p,
html[data-theme="dark"] .recognition-card small,
html[data-theme="dark"] .recognition-section-index,
html[data-theme="dark"] .recognition-more-label { color: var(--oa-dark-muted) !important; opacity: 1 !important; }
html[data-theme="dark"] .recognition-band-item,
html[data-theme="dark"] .recognition-card,
html[data-theme="dark"] .recognition-filter,
html[data-theme="dark"] .recognition-toolbar { background: var(--oa-dark-surface) !important; color: var(--oa-dark-text) !important; border-color: var(--oa-dark-border) !important; }
html[data-theme="dark"] .recognition-card-link,
html[data-theme="dark"] .recognition-back { color: var(--oa-dark-text) !important; }
html[data-theme="dark"] .recognition-card-link:hover,
html[data-theme="dark"] .recognition-card-link:focus-visible,
html[data-theme="dark"] .recognition-back:hover,
html[data-theme="dark"] .recognition-back:focus-visible { color: var(--oa-dark-accent) !important; }
html[data-theme="dark"] .recognition-viewmore { background: var(--oa-dark-surface) !important; color: var(--oa-dark-text) !important; border-color: var(--oa-dark-border) !important; }
html[data-theme="dark"] .recognition-viewmore b { color: var(--oa-dark-accent) !important; }
html[data-theme="dark"] .recognition-viewmore:hover,
html[data-theme="dark"] .recognition-viewmore:focus-visible { background: var(--oa-dark-raised) !important; color: var(--oa-dark-text) !important; border-color: #8ba19b !important; }
html[data-theme="dark"] .recognition-footer { color: var(--oa-dark-muted) !important; }

/* CONTACT — keep the card surfaces and all card metadata readable in both modes. */
html[data-theme="light"] .contact-page,
html[data-theme="light"] .contact-main { background: var(--oa-light-bg) !important; color: var(--oa-light-text) !important; }
html[data-theme="light"] .contact-heading h1,
html[data-theme="light"] .contact-card h2 { color: var(--oa-light-text) !important; }
html[data-theme="light"] .contact-heading p,
html[data-theme="light"] .contact-card p,
html[data-theme="light"] .contact-card-top,
html[data-theme="light"] .contact-direct small,
html[data-theme="light"] .contact-footer { color: var(--oa-light-muted) !important; opacity: 1 !important; }
html[data-theme="light"] .contact-kicker,
html[data-theme="light"] .contact-heading h1 span { color: var(--oa-light-accent) !important; }
html[data-theme="light"] .contact-card,
html[data-theme="light"] .contact-direct { background: var(--oa-light-surface) !important; color: var(--oa-light-text) !important; border-color: var(--oa-light-border) !important; }
html[data-theme="light"] .contact-card-link,
html[data-theme="light"] .contact-direct strong,
html[data-theme="light"] .contact-back { color: var(--oa-light-text) !important; }
html[data-theme="light"] .contact-card:hover,
html[data-theme="light"] .contact-card:focus-visible { background: var(--oa-light-raised) !important; border-color: #92a89d !important; box-shadow: 0 10px 24px rgba(23,37,33,.08) !important; }
html[data-theme="dark"] .contact-page,
html[data-theme="dark"] .contact-main { background: var(--oa-dark-bg) !important; color: var(--oa-dark-text) !important; }
html[data-theme="dark"] .contact-heading h1,
html[data-theme="dark"] .contact-card h2,
html[data-theme="dark"] .contact-direct strong { color: var(--oa-dark-text) !important; }
html[data-theme="dark"] .contact-heading p,
html[data-theme="dark"] .contact-card p,
html[data-theme="dark"] .contact-card-top,
html[data-theme="dark"] .contact-direct small,
html[data-theme="dark"] .contact-footer { color: var(--oa-dark-muted) !important; opacity: 1 !important; }
html[data-theme="dark"] .contact-kicker,
html[data-theme="dark"] .contact-heading h1 span { color: var(--oa-dark-accent) !important; }
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .contact-direct { background: var(--oa-dark-surface) !important; color: var(--oa-dark-text) !important; border-color: var(--oa-dark-border) !important; }
html[data-theme="dark"] .contact-card-link,
html[data-theme="dark"] .contact-back { color: var(--oa-dark-text) !important; }

/* PROJECT ARCHIVE — page-level surfaces. Keep the hero, footer and artboards dark. */
html[data-theme="light"] body:has(.detail-hero) { background: var(--oa-light-bg) !important; color: var(--oa-light-text) !important; }
html[data-theme="light"] .detail-light,
html[data-theme="light"] .reference-project { background: var(--oa-light-bg) !important; color: var(--oa-light-text) !important; }
html[data-theme="light"] .detail-dark,
html[data-theme="light"] .opensoccerbot-project { background: #11191c !important; color: #eef5f2 !important; }
html[data-theme="light"] .detail-light .detail-copy h2,
html[data-theme="light"] .detail-light .detail-copy h6,
html[data-theme="light"] .detail-light .detail-copy > p,
html[data-theme="light"] .detail-light .detail-copy .link-line,
html[data-theme="light"] .detail-light .detail-copy .project-meta { color: var(--oa-light-text) !important; opacity: 1 !important; }
html[data-theme="light"] .detail-light .detail-copy h6 { color: var(--oa-light-muted) !important; }
html[data-theme="light"] .detail-light .detail-copy p { color: var(--oa-light-muted) !important; }
html[data-theme="light"] .detail-dark .detail-copy h2,
html[data-theme="light"] .detail-dark .detail-copy h6,
html[data-theme="light"] .detail-dark .detail-copy > p,
html[data-theme="light"] .detail-dark .detail-copy .link-line,
html[data-theme="light"] .opensoccerbot-project .detail-copy h2,
html[data-theme="light"] .opensoccerbot-project .detail-copy h6,
html[data-theme="light"] .opensoccerbot-project .detail-copy > p { color: #eef5f2 !important; opacity: 1 !important; }
html[data-theme="light"] .detail-dark .detail-copy p,
html[data-theme="light"] .opensoccerbot-project .detail-copy p { color: #c0cecb !important; }
html[data-theme="dark"] .project-detail,
html[data-theme="dark"] .detail-light,
html[data-theme="dark"] .detail-dark,
html[data-theme="dark"] .reference-project,
html[data-theme="dark"] .opensoccerbot-project { background: var(--oa-dark-bg) !important; color: var(--oa-dark-text) !important; border-color: #2a393c !important; }
html[data-theme="dark"] .project-detail:nth-of-type(even) { background: #10191c !important; }
html[data-theme="dark"] .detail-copy h2,
html[data-theme="dark"] .detail-copy h6,
html[data-theme="dark"] .detail-copy > p,
html[data-theme="dark"] .detail-copy .link-line,
html[data-theme="dark"] .opensoccerbot-project .detail-copy h2,
html[data-theme="dark"] .opensoccerbot-project .detail-copy h6,
html[data-theme="dark"] .opensoccerbot-project .detail-copy > p { color: var(--oa-dark-text) !important; opacity: 1 !important; }
html[data-theme="dark"] .detail-copy h6 { color: var(--oa-dark-muted) !important; }
html[data-theme="dark"] .detail-copy p,
html[data-theme="dark"] .opensoccerbot-project .detail-copy p { color: var(--oa-dark-muted) !important; }
html[data-theme="dark"] .reference-block { background: var(--oa-dark-surface) !important; color: var(--oa-dark-text) !important; border-color: var(--oa-dark-border) !important; }
html[data-theme="dark"] .reference-block p { color: var(--oa-dark-muted) !important; }

/* The project metadata chips were the main white-on-white / black-on-black offender.
   Explicitly set both their surface and foreground (including the highlighted chip). */
html[data-theme="light"] .project-detail .project-meta span {
  background: #f0f4f1 !important; color: #263a32 !important; border-color: #bdcdc4 !important;
  box-shadow: 0 2px 0 rgba(20,40,32,.035), 0 5px 12px rgba(20,40,32,.045) !important;
}
html[data-theme="dark"] .project-detail .project-meta span {
  background: #1b292c !important; color: #e6f0ed !important; border-color: #53696c !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 5px 12px rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .project-detail .project-meta span.project-meta--important,
html[data-theme="light"] .opensoccerbot-project .project-meta span.project-meta--important {
  background: #d9f3e8 !important; color: #124432 !important; border-color: #6cae91 !important;
}
html[data-theme="dark"] .project-detail .project-meta span.project-meta--important,
html[data-theme="dark"] .opensoccerbot-project .project-meta span.project-meta--important {
  background: #173c32 !important; color: #c9ffec !important; border-color: #398c70 !important;
}
html[data-theme="light"] .detail-light .open-source-links a { background: #fff !important; color: #22342f !important; border-color: #aebfb7 !important; }
html[data-theme="light"] .detail-light .open-source-links a:first-child { background: #cbeee2 !important; color: #15392d !important; border-color: #7bbba2 !important; }
html[data-theme="dark"] .open-source-links a,
html[data-theme="dark"] .detail-light .open-source-links a { background: #1a292c !important; color: #edf6f2 !important; border-color: #536a6d !important; }
html[data-theme="dark"] .open-source-links a:first-child,
html[data-theme="dark"] .detail-light .open-source-links a:first-child { background: #c8f3e5 !important; color: #143a2d !important; border-color: #8bceb5 !important; }
html[data-theme="light"] .detail-light .foolscap-heading-subtitle { color: #076e8f !important; }
html[data-theme="dark"] .foolscap-heading-subtitle { color: #91dcf5 !important; }

/* Arctic-blue Foolscap details: controlled cyan, no radioactive green wash. */
.foolscap-card-visual,
.foolscap-preview {
  background: radial-gradient(circle at 80% 12%, rgba(93,188,231,.20), transparent 30%), linear-gradient(145deg,#08131b 0%,#142630 58%,#0b171e 100%) !important;
}
.foolscap-card-topline strong,
.foolscap-preview-top strong,
.foolscap-card-footer span { color: #9cdef6 !important; }
.foolscap-page .foolscap-highlight { background: rgba(71,172,211,.30) !important; border-left-color: #2788aa !important; }
.foolscap-paper i { border-color: #4ba6cb !important; }
.foolscap-tools span:first-child { background: #bfeafa !important; color: #102833 !important; border-color: #8dd4ed !important; }

/* Navigation remains a dark chrome surface in both themes, so its white labels stay readable. */
.site-navbar .nav-links a,
.site-navbar .menu-button { color: #f3f7f5; }
.navigation-drawer { background: #101719; color: #eef5f2; }
.navigation-drawer li a { color: #d5e0dd; }
.navigation-drawer li a:hover,
.navigation-drawer li a:focus-visible { color: #ffffff; }

@media (max-width: 760px) {
  /* Do not introduce a separate mobile palette: same contrast tokens, same surfaces. */
  html[data-theme="light"] .recognition-card,
  html[data-theme="light"] .recognition-band-item,
  html[data-theme="light"] .contact-card,
  html[data-theme="light"] .contact-direct { background: var(--oa-light-surface) !important; }
  html[data-theme="dark"] .recognition-card,
  html[data-theme="dark"] .recognition-band-item,
  html[data-theme="dark"] .contact-card,
  html[data-theme="dark"] .contact-direct { background: var(--oa-dark-surface) !important; }
  .project-detail .detail-grid { min-width: 0; }
  .project-detail .project-meta span { max-width: 100%; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch *, .theme-switch *::before, .theme-switch *::after { transition-duration: .01ms !important; }
}

/* Main portfolio typography that inherited muted legacy colors too aggressively. */
html[data-theme="light"] .section:not(.section-dark) .section-heading h6,
html[data-theme="light"] .projects-section .section-heading h6,
html[data-theme="light"] .coverage-section .section-heading h6,
html[data-theme="light"] .collaboration-section .section-heading h6,
html[data-theme="light"] .focus-card .num,
html[data-theme="light"] .project-label,
html[data-theme="light"] .experience-strip small,
html[data-theme="light"] .about-meta span,
html[data-theme="light"] .collab-card small,
html[data-theme="light"] .coverage-meta,
html[data-theme="light"] .coverage-meta span:first-child,
html[data-theme="light"] .coverage-note { color: #53645d !important; opacity: 1 !important; }
html[data-theme="light"] .project-body p,
html[data-theme="light"] .coverage-body p,
html[data-theme="light"] .experience-strip p { color: #586760 !important; opacity: 1 !important; }
html[data-theme="light"] .coverage-note span { color: #263a32 !important; }
html[data-theme="dark"] .focus-card .num,
html[data-theme="dark"] .project-label,
html[data-theme="dark"] .experience-strip small,
html[data-theme="dark"] .about-meta span,
html[data-theme="dark"] .collab-card small,
html[data-theme="dark"] .coverage-meta,
html[data-theme="dark"] .coverage-meta span:first-child,
html[data-theme="dark"] .coverage-note,
html[data-theme="dark"] .pub-date,
html[data-theme="dark"] .pub-feature-foot { color: #bac9c4 !important; opacity: 1 !important; }
html[data-theme="dark"] .project-body p,
html[data-theme="dark"] .coverage-body p,
html[data-theme="dark"] .experience-strip p { color: #b9c7c3 !important; opacity: 1 !important; }
html[data-theme="dark"] .publication-item span,
html[data-theme="dark"] .publication-item small,
html[data-theme="dark"] .publication-item.is-selected span,
html[data-theme="dark"] .publication-item.is-selected small,
html[data-theme="dark"] .publication-item[aria-selected="true"] span,
html[data-theme="dark"] .publication-item[aria-selected="true"] small { color: #becbc7 !important; opacity: 1 !important; }
html[data-theme="dark"] .publication-item,
html[data-theme="dark"] .publication-item:hover,
html[data-theme="dark"] .publication-item.is-selected,
html[data-theme="dark"] .publication-item[aria-selected="true"] { background: #182326 !important; color: #eef5f2 !important; }
html[data-theme="dark"] .publication-item strong { color: #eef5f2 !important; }
html[data-theme="dark"] .coverage-note span { color: #eef5f2 !important; }
/* Media overlays sit on photos/illustrations and must always use their own contrasting foreground. */
.coverage-media-tag, .coverage-media-arrow { color: #ffffff !important; }
html[data-theme="dark"] .coverage-media-tag, html[data-theme="dark"] .coverage-media-arrow { color: #ffffff !important; }
html[data-theme="light"] .coverage-media-tag, html[data-theme="light"] .coverage-media-arrow { color: #ffffff !important; }

html[data-theme="light"] .proficiency-section .section-heading h6 { color: #b9c7c3 !important; opacity: 1 !important; }