/* Custom properties & root tokens for TensorForge Event Site */
:root {
  --color-bg: #0a0e0c;
  --color-surface: #111713;
  --color-text: #e8f3ea;
  --color-accent: #9cff2e;
  --color-accent-2: #2bf5c8;
  --color-divider: color-mix(in srgb, #9cff2e 20%, transparent);
  --color-accent-100: #f3ffe2;
  --color-accent-200: #e4ffbc;
  --color-accent-300: #cdff88;
  --color-accent-400: #b6ff52;
  --color-accent-500: #9cff2e;
  --color-accent-600: #7ad117;
  --color-accent-700: #5b9d11;
  --color-accent-800: #37650d;
  --color-accent-900: #1f3d09;
  --color-accent-2-100: #e6fffa;
  --color-accent-2-200: #c3fff3;
  --color-accent-2-300: #8afae4;
  --color-accent-2-400: #4ef7d3;
  --color-accent-2-500: #2bf5c8;
  --color-accent-2-600: #17c9a2;
  --color-accent-2-700: #11957a;
  --color-accent-2-800: #0d6154;
  --color-accent-2-900: #093b34;
  --color-neutral-800: #252d27;
  --color-neutral-900: #151a17;
  --color-section: #0f2a16;
  --color-section-glow: #17431f;
  --color-section-ghost: #2c6b35;
  --shadow-sm: 0 0 0 1px #252d27;
  --shadow-md: 0 0 0 1px #37650d, 0 8px 28px rgba(0,0,0,.6);
  --shadow-lg: 0 0 0 1px #5b9d11, 0 18px 48px rgba(0,0,0,.7);
}

/* Base styles */
html {
  scroll-behavior: smooth;
}
body {
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-accent-300);
}
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  content: '';
}

/* Keyframes */
@keyframes tfGrid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 72px 72px, 72px 72px; }
}
@keyframes tfScan {
  from { transform: translateY(-120%); }
  to { transform: translateY(120%); }
}
@keyframes tfCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes tfPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes tfTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes tfGlitch {
  0% { text-shadow: none; transform: translateX(0); }
  15% { text-shadow: -2px 0 var(--color-accent-2-500), 2px 0 var(--color-accent); transform: translateX(1px); }
  30% { text-shadow: 2px 0 var(--color-accent-2-500), -2px 0 var(--color-accent); transform: translateX(-1px); }
  45% { text-shadow: -1px 0 var(--color-accent), 1px 0 var(--color-accent-2-500); transform: translateX(1px); }
  60% { text-shadow: 1px 0 var(--color-accent-2-500), -1px 0 var(--color-accent); transform: translateX(0); }
  100% { text-shadow: none; transform: translateX(0); }
}
@keyframes tfFlicker {
  0%, 100% { opacity: .55; }
  48% { opacity: .5; }
  50% { opacity: .75; }
  52% { opacity: .5; }
}

/* Specific component hover styles derived from style-hover attributes */
.nav-link {
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: var(--color-accent);
}
[data-glitch="1"]:hover {
  animation: tfGlitch .42s steps(2, end) 1;
}
details summary:hover {
  color: var(--color-accent-300);
}