@font-face {
  font-family: "League Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/LeagueGothic-Regular.woff2") format("woff2");
}

/* ───────────────────────────────────────────────────────────
   teezyjunk — neumorphic design tokens (dark + light)
   Flat surfaces, dual soft shadows, a touch of glass on overlays.
   ─────────────────────────────────────────────────────────── */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15171e; /* Richer, darker blue-tinted gray */
  --bg-end: #101219;
  --text: #f0f2f8;
  --text-2: #b4bac8;
  --muted: #828a9f;
  --sh-d: rgba(0, 0, 0, 0.65);
  --sh-l: rgba(255, 255, 255, 0.04);
  --edge: rgba(255, 255, 255, 0.05);
  --glass: rgba(21, 23, 30, 0.75);
  --accent: #818cf8; /* Vibrant indigo */
  --accent-ink: #0b1020;
  --ok: #4ade9a;
  --danger: #ff6b81;
  --warn: #ffbe55;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e8ebf2;
  --bg-end: #f1f3f8;
  --text: #1e2230;
  --text-2: #4d5469;
  --muted: #7c8498;
  --sh-d: rgba(143, 156, 181, 0.55);
  --sh-l: rgba(255, 255, 255, 0.95);
  --edge: rgba(255, 255, 255, 0.7);
  --glass: rgba(232, 235, 242, 0.75);
  --accent: #4f46e5; /* Deep vibrant indigo */
  --accent-ink: #ffffff;
  --ok: #17a56a;
  --danger: #e5384f;
  --warn: #c98512;
}

:root {
  --line: color-mix(in srgb, var(--text) 9%, transparent);

  /* neumorphic shadows */
  --raise-lg: 10px 10px 26px var(--sh-d), -10px -10px 26px var(--sh-l);
  --raise: 6px 6px 15px var(--sh-d), -6px -6px 15px var(--sh-l);
  --raise-sm: 3px 3px 8px var(--sh-d), -3px -3px 8px var(--sh-l);
  --inset: inset 5px 5px 11px var(--sh-d), inset -5px -5px 11px var(--sh-l);
  --inset-sm: inset 2px 2px 6px var(--sh-d), inset -2px -2px 6px var(--sh-l);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }


html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--bg);
  background-image: linear-gradient(145deg, var(--bg) 0%, var(--bg-end) 100%);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ── Fast cross-page / theme transitions (View Transitions) ─ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.15s var(--ease) forwards; }
::view-transition-new(root) { animation: vt-in 0.22s var(--ease) forwards; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (max-width: 600px) {
  @view-transition { navigation: none; }
}

/* ── Glass (overlays only) ─────────────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
}

/* ── Theme toggle ──────────────────────────────────────── */
.theme-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-2);
  box-shadow: var(--raise-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.theme-btn:hover { color: var(--text); transform: translateY(-1px); }
.theme-btn:active { box-shadow: var(--inset-sm); transform: scale(0.95); }
.theme-btn svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform 0.45s var(--ease), opacity 0.3s var(--ease); }
.theme-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }
.theme-btn .i-moon { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-btn .i-sun { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}