/* Shared contrast and color-theme layer. Loaded after page-specific styles. */
:root {
  --surface-shadow: 0 1.15rem 3rem rgba(0,0,0,.2), 0 .18rem .55rem rgba(0,0,0,.14);
  --surface-shadow-soft: 0 .75rem 2rem rgba(0,0,0,.14);
}

.theme-toggle {
  position: relative;
  display: inline-grid;
  flex: 0 0 2.75rem;
  place-items: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(7, 8, 9, .78);
  color: var(--muted);
  font: .82rem/1 var(--font-mono);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.theme-toggle span { grid-area: 1 / 1; transition: opacity 180ms ease, transform 240ms var(--ease-out); }
.theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle__moon { opacity: 0; transform: rotate(-35deg) scale(.65); }
.theme-toggle__beta {
  position: absolute;
  top: -.34rem;
  right: -.42rem;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 1.65rem;
  min-height: .78rem;
  padding: .08rem .18rem;
  border: 1px solid currentColor;
  background: var(--panel-raised);
  color: var(--yellow);
  font: 500 .34rem/1 var(--font-mono);
  letter-spacing: .08em;
  box-shadow: 0 .2rem .6rem rgba(0,0,0,.2);
  pointer-events: none;
}
.theme-toggle:hover,
.theme-toggle:focus-visible { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f4;
  --panel: #f8fafb;
  --panel-raised: #ffffff;
  --text: #111820;
  --text-soft: #24313a;
  --muted: #3d4b55;
  --line: #aebbc4;
  --line-soft: rgba(24, 42, 54, .16);
  --blue: #17658f;
  --orange: #a9472f;
  --yellow: #786400;
  --surface-shadow: 0 1.15rem 3rem rgba(38,56,68,.11), 0 .18rem .55rem rgba(38,56,68,.08);
  --surface-shadow-soft: 0 .75rem 2rem rgba(38,56,68,.08);
}

html[data-theme="light"] .theme-toggle__sun { opacity: 0; transform: rotate(35deg) scale(.65); }
html[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }

html[data-theme="light"] body,
html[data-theme="light"] .codelab-body,
html[data-theme="light"] .legal-body { background-color: var(--bg); }

html[data-theme="light"] body::before {
  background-image: linear-gradient(rgba(25,48,62,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(25,48,62,.06) 1px, transparent 1px);
}

html[data-theme="light"] .signal-field { opacity: .16; }
html[data-theme="light"].js .intro-curtain { background: var(--bg); }
html[data-theme="light"] .topbar,
html[data-theme="light"] .topbar.is-scrolled { background: rgba(248,250,251,.94); }
html[data-theme="light"] .language-toggle,
html[data-theme="light"] .theme-toggle { background: rgba(255,255,255,.9); }
html[data-theme="light"] .language-toggle:hover,
html[data-theme="light"] .language-toggle:focus-visible,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible { background: #e4edf2; }

.panel,
.focus-card,
.project-feature,
.semester-project,
.software-project,
.project-roadmap,
.certificate,
.lab-breach,
.contact-panel,
.legal-layout,
.codelab-main > section,
.project-main > section {
  box-shadow: var(--surface-shadow);
}

.resume-console,
.tool-group,
.repository-card,
.repository-group,
.repo-terminal,
.source-workbench,
.presence-simulator {
  box-shadow: var(--surface-shadow-soft);
}

.topbar.is-scrolled { box-shadow: 0 .65rem 1.8rem rgba(0,0,0,.14); }
html[data-theme="light"] .topbar.is-scrolled { box-shadow: 0 .65rem 1.8rem rgba(38,56,68,.09); }

/* Small editorial indices receive one extra pixel without enlarging dates,
 * versions, metrics or numbers inside running copy. */
.card-kicker span,
.tool-group__index,
.certificate__index,
.legal-index,
.release-number {
  font-size: calc(1rem + 1px);
}

.project-feature__index,
.semester-project__index,
.software-project__index,
.pe1-card-grid article > span,
.project-roadmap__copy > ol > li span {
  font-size: calc(.82rem + 1px);
}

.project-history li > span { font-size: calc(.68rem + 1px); }
.legal-toc a span { font-size: calc(.78rem + 1px); }
.principle-grid article > span { font-size: calc(.72rem + 1px); }
.architecture-flow article > span { font-size: calc(.72rem + 1px); }
.docs-grid article > span,
.release-section li > span,
.repository-group li > span { font-size: calc(.72rem + 1px); }
.lab-breach__terminal li > span { font-size: calc(.7rem + 1px); }

html[data-theme="light"] .panel,
html[data-theme="light"] .focus-card,
html[data-theme="light"] .tool-group,
html[data-theme="light"] .project-feature,
html[data-theme="light"] .semester-project,
html[data-theme="light"] .software-project,
html[data-theme="light"] .project-roadmap,
html[data-theme="light"] .certificate,
html[data-theme="light"] .lab-breach,
html[data-theme="light"] .contact-panel,
html[data-theme="light"] .legal-layout,
html[data-theme="light"] .legal-aside,
html[data-theme="light"] .legal-document { background-color: var(--panel); }

html[data-theme="light"] .codelab-main > section,
html[data-theme="light"] .project-main > section,
html[data-theme="light"] .breadcrumbs { background-color: var(--panel); }

html[data-theme="light"] .project-feature__visual,
html[data-theme="light"] .project-feature__stage,
html[data-theme="light"] .semester-project__visual,
html[data-theme="light"] .software-project__visual,
html[data-theme="light"] .project-roadmap__visual {
  --text: #eeeeea;
  --text-soft: #e5e6e3;
  --muted: #c5c9cd;
  --line: #35404a;
  --blue: #78bce8;
  background-color: #080b0d;
}

/*
 * The illustrations were authored as dark technical canvases. In light mode
 * the complete canvas is converted as one layer so every animated child,
 * including hard-coded SVG strokes and keyframe states, follows the theme.
 * Invert + a half-turn keeps the blue/yellow/green accent hues recognisable.
 */
html[data-theme="light"] :is(
  .resume-console,
  .web-visual,
  .network-visual,
  .security-visual,
  .project-feature__visual,
  .semester-project__visual,
  .software-project__visual,
  .project-roadmap__visual,
  .lab-breach__visual,
  .lab-gate,
  .repo-terminal,
  .presence-map,
  .simulator-stage
) {
  --text: #eeeeea;
  --text-soft: #e5e6e3;
  --muted: #c5c9cd;
  --line: #35404a;
  --blue: #78bce8;
  filter: invert(.93) hue-rotate(180deg) saturate(.92) contrast(.97);
  transition: filter 280ms ease, border-color 180ms ease, background-color 180ms ease;
}

html[data-theme="light"] .lab-breach__visual {
  /* Preserve the transform transition used by the breach hover animation. */
  transition: filter 280ms ease, transform 420ms var(--ease-out);
}

html[data-theme="light"] .language-shift { background: var(--bg); }

html[data-theme="light"] .certificate__preview,
html[data-theme="light"] .project-with-history > .project-history,
html[data-theme="light"] .contact-actions { background-color: var(--panel-raised); }

html[data-theme="light"] .project-history summary {
  background:
    linear-gradient(90deg, rgba(36, 122, 176, 0.12), rgba(36, 122, 176, 0.035) 58%, transparent),
    #f8fbfc;
  box-shadow: 0 0.55rem 1.5rem rgba(30, 45, 54, 0.09);
}

html[data-theme="light"] .project-history summary:hover,
html[data-theme="light"] .project-history summary:focus-visible {
  background:
    linear-gradient(90deg, rgba(36, 122, 176, 0.19), rgba(36, 122, 176, 0.06) 68%, transparent),
    #ffffff;
  box-shadow:
    0 0.85rem 2rem rgba(30, 45, 54, 0.15),
    inset 0 0 0 1px rgba(36, 122, 176, 0.08);
}

html[data-theme="light"] .repo-dashboard,
html[data-theme="light"] .repo-hero,
html[data-theme="light"] .repo-hero__copy,
html[data-theme="light"] .repo-terminal,
html[data-theme="light"] .repository-card,
html[data-theme="light"] .repository-group,
html[data-theme="light"] .pe1-group-hero,
html[data-theme="light"] .pe1-catalog,
html[data-theme="light"] .pe1-card-grid article,
html[data-theme="light"] .documentation-section,
html[data-theme="light"] .docs-grid article,
html[data-theme="light"] .source-workbench,
html[data-theme="light"] .file-browser,
html[data-theme="light"] .code-viewer,
html[data-theme="light"] .release-card,
html[data-theme="light"] .presence-simulator,
html[data-theme="light"] .limitations,
html[data-theme="light"] .release-section { background-color: var(--panel); }

html[data-theme="light"] .repo-terminal,
html[data-theme="light"] .code-viewer {
  --text: #eeeeea;
  --text-soft: #e5e6e3;
  --muted: #c5c9cd;
  --line: #35404a;
  --blue: #78bce8;
  background-color: #080b0d;
  box-shadow: 0 1.4rem 3rem rgba(32,48,58,.16);
}

html[data-theme="light"] .certificate__actions a,
html[data-theme="light"] .profile-socials a { background: #e7edf1; color: var(--text-soft); }
html[data-theme="light"] .profile-esports {
  background:
    linear-gradient(110deg, rgba(38, 117, 166, 0.1), transparent 70%),
    #f4f8fa;
  box-shadow: 0 0.9rem 2rem rgba(29, 48, 61, 0.09);
}
html[data-theme="light"] .certificate__actions a:hover,
html[data-theme="light"] .certificate__actions a:focus-visible,
html[data-theme="light"] .profile-socials a:hover,
html[data-theme="light"] .profile-socials a:focus-visible { background: #d9e5eb; }

html[data-theme="light"] .subpage-navigation a,
html[data-theme="light"] .nav-contact { background-color: rgba(255,255,255,.72); }

html[data-theme="light"] .cookie-note,
html[data-theme="light"] .back-to-top {
  background: rgba(248,250,251,.97);
  color: var(--text);
  box-shadow: 0 .8rem 2.4rem rgba(30,45,54,.18);
}

@media (max-width: 760px) {
  .topbar-tools { gap: .38rem; }
  .theme-toggle { flex-basis: 2.45rem; width: 2.45rem; min-height: 2.45rem; }
  .theme-toggle__beta { top: -.25rem; right: -.28rem; transform: scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle span,
  html[data-theme="light"] :is(
    .resume-console,
    .web-visual,
    .network-visual,
    .security-visual,
    .project-feature__visual,
    .semester-project__visual,
    .software-project__visual,
    .project-roadmap__visual,
    .lab-breach__visual,
    .lab-gate,
    .repo-terminal,
    .presence-map,
    .simulator-stage
  ) { transition: none; }
}