/* Diseño A — Kleine Hassler. Tokens + hover/animation rules.
   Layout styles live inline in the rendered markup (assets/app.js) to mirror
   the original Claude Design component; this file holds everything that inline
   styles can't express: theme tokens, :hover, keyframes, media queries. */

:root {
  --bg: #eef0f3;
  --surface: #ffffff;
  --surface2: #f6f7f9;
  --text: #14171c;
  --muted: #646b76;
  --border: #e6e8ec;
  --accent: #2a6fdb;
  --accent2: #1f57b0;
  --soft: #e9f0fc;
  --shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 10px 30px rgba(20, 30, 50, .06);
}

[data-theme=dark] {
  --bg: #0b0d11;
  --surface: #14181f;
  --surface2: #1a1f28;
  --text: #e9ebef;
  --muted: #99a1ad;
  --border: #262c37;
  --accent: #5b9bff;
  --accent2: #82b4ff;
  --soft: #142133;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 36px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; }

@keyframes khPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes khSpin { to { transform: rotate(360deg); } }

/* ── Hover states (replaces the runtime's style-hover attribute) ───────── */
.kh-navlink:hover { color: var(--text) !important; background: var(--surface2); }
.kh-iconbtn:hover { border-color: var(--accent) !important; color: var(--accent); }
.kh-cta-primary:hover { background: var(--accent2) !important; transform: translateY(-2px); }
.kh-cta-ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.kh-linkcard:hover { border-color: var(--accent) !important; transform: translateY(-2px); }
.kh-exp:hover { border-color: var(--accent) !important; }
.kh-proj:hover { border-color: var(--accent) !important; transform: translateY(-3px); }
.kh-repo:hover { border-color: var(--accent) !important; transform: translateY(-3px); }
.kh-contact-white:hover { transform: translateY(-2px); }
.kh-contact-ghost:hover { background: rgba(255, 255, 255, .26) !important; }
.kh-reposall:hover { text-decoration: underline; }

/* Photo placeholder shown behind/instead of the profile image */
.kh-photo-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 64px;
  letter-spacing: -.04em; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 820px) {
  .kh-bento { grid-template-columns: 1fr !important; }
  .kh-2 { grid-template-columns: 1fr !important; }
  .kh-hidem { display: none !important; }
}