/*
 * Theme worlds
 * Shared components consume the same semantic tokens. Scoped rules below only
 * change visual language or an intentional composition, keeping new sections reusable.
 */
:root {
  --radius-control: 6px;
  --radius-panel: 8px;
  --surface-border: 1px;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --card-shadow: none;
  --focus-ring: color-mix(in srgb, var(--cyan) 26%, transparent);
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

h1,
h2 {
  font-family: var(--font-display);
}

.site-header,
.profile-panel,
.bento-tile,
.work-explorer,
.project-toolbar,
.project-card,
.timeline-item,
.credential-card,
.skill-grid section,
.contact-section .section-heading,
.project-dialog,
.feedback-dialog {
  border-radius: var(--radius-panel);
}

.button,
.filter,
.theme-trigger,
.theme-option,
.audience-options button,
.layout-options button,
.evidence-input-row input,
.tags span,
.project-type,
.dialog-close,
.architecture-explorer {
  border-radius: var(--radius-control);
}

.theme-options {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  width: min(356px, calc(100vw - 24px));
}

.theme-option-copy {
  display: grid;
  min-width: 0;
}

.theme-option-copy strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.15;
}

.theme-option-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Android: friendly Material-inspired hierarchy with calm tonal surfaces. */
:root[data-theme="swiss"] {
  color-scheme: light;
  --bg: #f7f9f4;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --line: #c9d3c7;
  --ink: #1f2822;
  --muted: #59645c;
  --blue: #0b57d0;
  --cyan: #0f766e;
  --rose: #d93025;
  --amber: #9a5d00;
  --green: #0f9d58;
  --nav-bg: rgba(247, 249, 244, 0.94);
  --button-bg: #ffffff;
  --soft-panel: #e9f1e7;
  --chip-bg: #eef4ec;
  --visual-bg: #dce8f8;
  --page-background:
    linear-gradient(125deg, transparent 0 72%, rgba(15, 157, 88, 0.045) 72%),
    #f7f9f4;
  --background-size: auto;
  --radius-control: 8px;
  --radius-panel: 8px;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --shadow: 0 16px 48px rgba(40, 62, 45, 0.1);
}

:root[data-theme="swiss"] .grid-layer {
  display: block;
  opacity: 0.4;
  background-image: linear-gradient(118deg, transparent 35%, rgba(11, 87, 208, 0.1) 48%, transparent 61%);
  background-size: 220% 100%;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
  animation: android-tonal-flow 22s ease-in-out infinite;
}

:root[data-theme="swiss"] .star-field,
:root[data-theme="swiss"] .theme-scene {
  display: none;
}

:root[data-theme="swiss"] .site-header {
  border-color: var(--line);
  background: var(--nav-bg);
  box-shadow: 0 8px 30px rgba(40, 62, 45, 0.07);
}

:root[data-theme="swiss"] h1 {
  max-width: 820px;
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 7.4vw, 6.2rem);
  font-weight: 820;
  line-height: 0.94;
}

:root[data-theme="swiss"] .eyebrow {
  padding: 5px 9px;
  border-radius: 999px;
  background: #dce8f8;
  color: var(--blue);
}

:root[data-theme="swiss"] .profile-panel,
:root[data-theme="swiss"] .bento-tile,
:root[data-theme="swiss"] .project-card,
:root[data-theme="swiss"] .skill-grid section {
  border-width: 1px;
  border-color: var(--line);
  border-radius: var(--radius-panel);
  background: #ffffff;
  box-shadow: var(--shadow);
}

:root[data-theme="swiss"] .bento-tile.wide {
  background: #0b57d0;
  color: #ffffff;
}

:root[data-theme="swiss"] .bento-tile.wide .eyebrow,
:root[data-theme="swiss"] .bento-tile.wide h2 {
  color: #ffffff;
}

:root[data-theme="swiss"] .project-card {
  border-top: 1px solid var(--line);
}

:root[data-theme="swiss"] .project-visual {
  border-radius: var(--radius-panel);
  background: var(--visual-bg);
}

:root[data-theme="swiss"] .signal-card {
  border-color: #c7d9c7;
  background: var(--soft-panel);
}

:root[data-theme="swiss"] .button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}

/* Cosmos: restrained deep-space depth without sacrificing content contrast. */
:root[data-theme="interstellar"] {
  color-scheme: dark;
  --bg: #050812;
  --panel: rgba(12, 18, 32, 0.94);
  --panel-strong: #0d1424;
  --line: #29354c;
  --ink: #f5f8ff;
  --muted: #a7b5cc;
  --blue: #82aaff;
  --cyan: #70d7ff;
  --rose: #ff8a73;
  --amber: #ffbd66;
  --green: #69dfbf;
  --nav-bg: rgba(5, 8, 18, 0.9);
  --button-bg: #141d2e;
  --soft-panel: #0e1728;
  --chip-bg: #172238;
  --visual-bg: #0d1830;
  --page-background:
    radial-gradient(ellipse at 82% 12%, rgba(112, 215, 255, 0.09), transparent 26%),
    linear-gradient(305deg, rgba(255, 189, 102, 0.045), transparent 42%),
    #050812;
  --radius-control: 6px;
  --radius-panel: 8px;
  --font-display: Georgia, "Times New Roman", serif;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}

:root[data-theme="interstellar"] .star-field {
  display: block;
  opacity: 0.62;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.76) 1px, transparent 1.3px),
    radial-gradient(circle, rgba(112, 215, 255, 0.48) 1px, transparent 1.4px);
  background-position: 0 0, 38px 57px;
  background-size: 154px 154px, 211px 211px;
  animation: cosmos-star-fall 34s linear infinite;
}

:root[data-theme="interstellar"] .grid-layer {
  display: none;
}

:root[data-theme="interstellar"] .theme-scene {
  display: block;
  opacity: 0.46;
}

:root[data-theme="interstellar"] .scene-one {
  display: block;
  top: -120%;
  right: -15%;
  width: 130%;
  height: 220%;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 26% 18%, rgba(112, 215, 255, 0.28), transparent 15%),
    radial-gradient(ellipse at 72% 44%, rgba(255, 189, 102, 0.2), transparent 13%),
    radial-gradient(ellipse at 44% 74%, rgba(130, 170, 255, 0.2), transparent 17%),
    linear-gradient(108deg, transparent 22%, rgba(112, 215, 255, 0.11) 37%, rgba(255, 189, 102, 0.08) 51%, transparent 68%);
  filter: blur(24px);
  animation: cosmos-galaxy-descent 30s linear infinite;
}

:root[data-theme="interstellar"] .scene-two {
  display: block;
  top: -140%;
  right: 4%;
  bottom: auto;
  width: 54%;
  height: 240%;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 26%, rgba(107, 220, 255, 0.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 38% 64%, rgba(255, 194, 102, 0.62) 0 1px, transparent 1.8px),
    linear-gradient(172deg, transparent 8%, rgba(78, 136, 255, 0.04) 34%, rgba(88, 226, 255, 0.12) 52%, rgba(199, 118, 255, 0.07) 67%, transparent 88%);
  background-size: 97px 131px, 149px 191px, 211px 257px, auto;
  background-position: 0 0, 32px 54px, 88px 27px, 0 0;
  filter: blur(0.5px);
  transform: rotate(-11deg);
  animation: cosmos-galaxy-descent 44s linear infinite reverse;
}

:root[data-theme="interstellar"] .hero-copy::after {
  content: "ORBITAL SYSTEMS / MISSION 01";
  display: block;
}

:root[data-theme="interstellar"] h1 {
  font-weight: 500;
}

:root[data-theme="interstellar"] .site-header,
:root[data-theme="interstellar"] .profile-panel,
:root[data-theme="interstellar"] .project-card {
  border-color: var(--line);
  background: var(--panel);
}

:root[data-theme="interstellar"] .profile-panel {
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.42);
}

:root[data-theme="interstellar"] .button.primary {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #08110f;
}

:root[data-theme="interstellar"] .button.ghost {
  color: var(--amber);
}

/* Product: familiar, polished software surfaces for fast recruiter scanning. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef4ff;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-strong: #ffffff;
  --line: #ced9ec;
  --ink: #13213b;
  --muted: #5c6c86;
  --blue: #1d5bd8;
  --cyan: #0c8f78;
  --rose: #d94f70;
  --amber: #a35a00;
  --green: #0c8f78;
  --nav-bg: rgba(255, 255, 255, 0.88);
  --button-bg: #ffffff;
  --soft-panel: #e5edfb;
  --chip-bg: #f1f5fc;
  --visual-bg: #e7eefb;
  --page-background:
    linear-gradient(135deg, rgba(29, 91, 216, 0.045) 25%, transparent 25%) 0 0 / 40px 40px,
    #eef4ff;
  --background-size: auto;
  --radius-control: 7px;
  --radius-panel: 8px;
  --font-display: var(--font-body);
  --shadow: 0 20px 60px rgba(32, 64, 120, 0.12);
}

:root[data-theme="light"] .grid-layer,
:root[data-theme="light"] .star-field,
:root[data-theme="light"] .theme-scene {
  display: none;
}

:root[data-theme="light"] .grid-layer {
  display: block;
  opacity: 0.3;
  background-image: linear-gradient(125deg, transparent 38%, rgba(29, 91, 216, 0.09) 50%, transparent 62%);
  background-size: 220% 100%;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
  animation: product-sheen 26s ease-in-out infinite;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2 {
  font-family: var(--font-display);
  font-weight: 850;
  line-height: 0.96;
}

:root[data-theme="light"] .site-header {
  border-bottom: 1px solid var(--line);
  background: var(--nav-bg);
}

:root[data-theme="light"] .profile-panel,
:root[data-theme="light"] .bento-tile,
:root[data-theme="light"] .project-card,
:root[data-theme="light"] .timeline-item,
:root[data-theme="light"] .credential-card {
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

:root[data-theme="light"] .project-card {
  border-top: 1px solid var(--line);
}

:root[data-theme="light"] .button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}

/* Blueprint: a systems-first drafting surface for architecture-heavy evidence. */
:root[data-theme="terminal"] {
  color-scheme: dark;
  --bg: #071a2f;
  --panel: rgba(8, 37, 65, 0.94);
  --panel-strong: #0a2948;
  --line: rgba(103, 212, 255, 0.36);
  --ink: #edf9ff;
  --muted: #a8cee0;
  --blue: #67d4ff;
  --cyan: #67d4ff;
  --rose: #ff9a76;
  --amber: #ffd166;
  --green: #7ee8c7;
  --nav-bg: rgba(7, 26, 47, 0.92);
  --button-bg: #0b3155;
  --soft-panel: rgba(8, 37, 65, 0.92);
  --chip-bg: #0b3155;
  --visual-bg: #092744;
  --page-background: #071a2f;
  --background-size: auto;
  --radius-control: 2px;
  --radius-panel: 2px;
  --font-body: Consolas, "Courier New", monospace;
  --font-display: var(--font-body);
  --shadow: none;
}

:root[data-theme="terminal"] .grid-layer {
  display: block;
  opacity: 0.58;
  background-image:
    linear-gradient(rgba(103, 212, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 212, 255, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(103, 212, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 212, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  mask-image: linear-gradient(to bottom, black 0 72%, transparent);
}

:root[data-theme="terminal"] .star-field {
  display: none;
}

:root[data-theme="terminal"] .theme-scene {
  display: block;
  opacity: 0.44;
}

:root[data-theme="terminal"] .scene-one {
  display: block;
  top: -4px;
  right: 0;
  width: 100%;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(103, 212, 255, 0.72), transparent);
  box-shadow: 0 0 22px rgba(103, 212, 255, 0.42);
  animation: blueprint-scan 14s linear infinite;
}

:root[data-theme="terminal"] .scene-two {
  display: none;
}

:root[data-theme="terminal"] .hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
}

:root[data-theme="terminal"] h1 {
  max-width: 820px;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.98;
  text-transform: none;
}

:root[data-theme="terminal"] .eyebrow::before {
  content: "// ";
}

:root[data-theme="terminal"] .profile-panel {
  display: grid;
  width: auto;
  grid-template-columns: 1fr;
  background: var(--panel);
}

:root[data-theme="terminal"] .profile-card-top,
:root[data-theme="terminal"] .signal-grid,
:root[data-theme="terminal"] .system-monitor {
  grid-column: auto;
  grid-row: auto;
}

:root[data-theme="terminal"] .button.primary {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #071a2f;
}

/* Future Lab: a light speculative systems interface with restrained accents. */
:root[data-theme="brutalist"] {
  color-scheme: light;
  --bg: #eef3f1;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: #ffffff;
  --line: #a6b9b4;
  --ink: #15302e;
  --muted: #566b67;
  --blue: #176b87;
  --cyan: #007f73;
  --rose: #ff654a;
  --amber: #9b5700;
  --green: #007f73;
  --nav-bg: rgba(238, 243, 241, 0.92);
  --button-bg: #ffffff;
  --soft-panel: #dfece8;
  --chip-bg: #e8f0ed;
  --visual-bg: #d8e8e4;
  --page-background:
    linear-gradient(135deg, transparent 0 74%, rgba(0, 127, 115, 0.045) 74%),
    #eef3f1;
  --background-size: auto;
  --radius-control: 3px;
  --radius-panel: 3px;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --shadow: 0 18px 50px rgba(21, 61, 58, 0.12);
}

:root[data-theme="brutalist"] .star-field,
:root[data-theme="brutalist"] .theme-scene {
  display: none;
}

:root[data-theme="brutalist"] .grid-layer {
  display: block;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(0, 127, 115, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 127, 115, 0.09) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  animation: future-grid-drift 24s linear infinite;
}

@media (min-width: 1081px) {
  :root[data-theme="swiss"] .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  :root[data-theme="swiss"] .hero-copy {
    max-width: 980px;
  }

  :root[data-theme="swiss"] .profile-panel {
    grid-template-columns: minmax(230px, 0.75fr) minmax(360px, 1.25fr) minmax(280px, 0.9fr);
    align-items: stretch;
  }

  :root[data-theme="swiss"] .profile-card-top {
    grid-column: 1;
  }

  :root[data-theme="swiss"] .signal-grid {
    grid-column: 2;
  }

  :root[data-theme="swiss"] .system-monitor {
    grid-column: 3;
    grid-row: 1;
  }

  :root[data-theme="brutalist"] .hero-copy {
    grid-column: 2;
    grid-row: 1;
  }

  :root[data-theme="brutalist"] .profile-panel {
    grid-column: 1;
    grid-row: 1;
  }
}

@keyframes android-tonal-flow {
  0%, 100% { background-position: 120% 0; }
  50% { background-position: -120% 0; }
}

@keyframes product-sheen {
  0%, 100% { background-position: 140% 0; }
  50% { background-position: -140% 0; }
}

@keyframes cosmos-star-fall {
  from { background-position: 0 -220px, 38px -340px; }
  to { background-position: 0 520px, 38px 610px; }
}

@keyframes cosmos-galaxy-descent {
  from { transform: translate3d(0, -18%, 0) rotate(-4deg); }
  to { transform: translate3d(0, 28%, 0) rotate(4deg); }
}

@keyframes blueprint-scan {
  from { transform: translateY(-4vh); }
  to { transform: translateY(104vh); }
}

@keyframes future-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 192px, 0 192px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .grid-layer,
  :root[data-theme] .star-field,
  :root[data-theme] .scene-object {
    animation: none;
  }
}

.reduce-motion .grid-layer,
.reduce-motion .star-field,
.reduce-motion .scene-object {
  animation: none;
}

:root[data-theme="brutalist"] .site-header {
  border: 1px solid var(--line);
  background: var(--nav-bg);
  box-shadow: 0 10px 36px rgba(21, 61, 58, 0.1);
}

:root[data-theme="brutalist"] h1 {
  max-width: 820px;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 780;
  line-height: 0.92;
  text-transform: none;
}

:root[data-theme="brutalist"] .eyebrow {
  padding: 5px 8px;
  border: 0;
  background: #153d3a;
  color: #ffffff;
}

:root[data-theme="brutalist"] .profile-panel,
:root[data-theme="brutalist"] .bento-tile,
:root[data-theme="brutalist"] .project-card,
:root[data-theme="brutalist"] .skill-grid section,
:root[data-theme="brutalist"] .project-toolbar {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: var(--shadow);
}

:root[data-theme="brutalist"] .project-card {
  border-top: 3px solid var(--project-accent, var(--rose));
}

:root[data-theme="brutalist"] .signal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--soft-panel);
}

:root[data-theme="brutalist"] .project-visual {
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--visual-bg);
  color: var(--ink);
}

:root[data-theme="brutalist"] .stack-strip {
  border-width: 1px 0;
  background: #153d3a;
}

:root[data-theme="brutalist"] .stack-track span {
  color: #ffffff;
}

:root[data-theme="brutalist"] .button {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: none;
}

:root[data-theme="brutalist"] .button.primary {
  border-color: #153d3a;
  background: #153d3a;
  color: #ffffff;
}

:root[data-theme="brutalist"] .project-dialog,
:root[data-theme="brutalist"] .feedback-dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel-strong);
  box-shadow: 0 24px 80px rgba(21, 61, 58, 0.22);
}

:root[data-theme="brutalist"] .project-dialog .dialog-close,
:root[data-theme="brutalist"] .project-dialog .architecture-explorer {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #e8f0ed;
}

/* Lists stay structurally quiet in every visual world. */
:root[data-project-layout="list"][data-theme] .project-card,
:root[data-project-layout="list"][data-theme] .project-card.featured,
:root[data-project-layout="list"][data-theme] .project-card.show,
:root[data-project-layout="list"][data-theme] .project-card.show:hover {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="brutalist"][data-project-layout="list"] .project-grid {
  border-top: 1px solid var(--line);
}

:root[data-theme="brutalist"][data-project-layout="list"] .project-card,
:root[data-theme="brutalist"][data-project-layout="list"] .project-card.featured {
  border-bottom: 1px solid var(--line);
}