/* Sitaro — Custom Styles (beyond Tailwind utilities) */

/* Self-hosted fonts — DSGVO compliant, no external requests */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background-color: #2563EB;
  color: #FAFAFA;
}

/* Terminal syntax highlighting */
.token-tag { color: #F472B6; }
.token-attr { color: #A78BFA; }
.token-value { color: #34D399; }
.token-text { color: #D1D5DB; }
.token-comment { color: #4B5563; }
.token-bracket { color: #6B7280; }
.token-property { color: #67E8F9; }
.token-css-value { color: #FBBF24; }
.token-selector { color: #F472B6; }

/* Terminal cursor blink */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#terminal-cursor {
  animation: cursor-blink 0.8s ease-in-out infinite;
}

/* Lighthouse score counter */
@keyframes score-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(52, 211, 153, 0.3); }
  50% { text-shadow: 0 0 16px rgba(52, 211, 153, 0.6); }
}

.score-active {
  animation: score-glow 2s ease-in-out infinite;
}

/* Scroll-triggered fade in */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #terminal-cursor { animation: none; opacity: 1; }
  .score-active { animation: none; }
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Light Mode Theme ───────────────────────────────────────── */
/* Accent: Amber-700 #B45309 — warm, handwerklich, vertrauenswürdig */

/* Core */
.light-mode { background-color: #FFFFFF; color: #0F172A; }
.light-mode ::selection { background-color: #B45309; color: #FFFFFF; }

/* ── Backgrounds ── */
.light-mode .bg-sitaro-black { background-color: #FFFFFF; }
.light-mode .bg-sitaro-black\/50 { background-color: rgb(255 255 255 / 0.5); }
.light-mode .bg-sitaro-black\/80 { background-color: rgb(255 255 255 / 0.8); }
.light-mode .bg-sitaro-black\/95 { background-color: rgb(255 255 255 / 0.95); }
.light-mode .bg-gray-950 { background-color: #F8FAFC; }
.light-mode .bg-gray-900\/80 { background-color: rgb(248 250 252 / 0.8); }
.light-mode .bg-gray-900\/50 { background-color: rgb(248 250 252 / 0.5); }
.light-mode .bg-gray-900\/30 { background-color: rgb(248 250 252 / 0.3); }
.light-mode .bg-white\/5 { background-color: rgb(15 23 42 / 0.04); }
.light-mode .bg-white\/\[0\.02\] { background-color: rgb(15 23 42 / 0.02); }

/* Accent */
.light-mode .bg-sitaro-accent { background-color: #B45309; }
.light-mode .bg-sitaro-accent\/5 { background-color: rgb(180 83 9 / 0.06); }
.light-mode .bg-sitaro-accent\/10 { background-color: rgb(180 83 9 / 0.1); }
.light-mode .bg-sitaro-accent\/\[0\.02\] { background-color: rgb(180 83 9 / 0.03); }

/* ── Text — high contrast on white ── */
.light-mode .text-sitaro-white { color: #0F172A; }
.light-mode .text-white { color: #0F172A; }
.light-mode .text-sitaro-accent { color: #92400E; }
.light-mode .text-gray-200 { color: #1E293B; }
.light-mode .text-gray-300 { color: #334155; }
.light-mode .text-gray-400 { color: #475569; }
.light-mode .text-gray-500 { color: #64748B; }

/* Keep white text on accent backgrounds and tooltips */
.light-mode .bg-sitaro-accent { color: #FFFFFF; }
.light-mode .bg-gray-800 .text-white { color: #FFFFFF; }

/* ── Borders — more visible ── */
.light-mode .border-white\/5 { border-color: rgb(15 23 42 / 0.1); }
.light-mode .border-white\/10 { border-color: rgb(15 23 42 / 0.12); }
.light-mode .border-white\/20 { border-color: rgb(15 23 42 / 0.18); }
.light-mode .border-sitaro-accent\/10 { border-color: rgb(180 83 9 / 0.15); }
.light-mode .border-sitaro-accent\/20 { border-color: rgb(180 83 9 / 0.25); }

/* ── Rings & shadows ── */
.light-mode .ring-sitaro-accent\/5 { --tw-ring-color: rgb(180 83 9 / 0.08); }
.light-mode .ring-sitaro-accent\/10 { --tw-ring-color: rgb(180 83 9 / 0.12); }
.light-mode .shadow-sitaro-accent\/5 { --tw-shadow-color: rgb(180 83 9 / 0.08); }

/* ── Gradients ── */
.light-mode .to-gray-950 { --tw-gradient-to: #F8FAFC; }
.light-mode .to-sitaro-black { --tw-gradient-to: #FFFFFF; }
.light-mode .from-sitaro-accent\/5 {
  --tw-gradient-from: rgb(180 83 9 / 0.06);
  --tw-gradient-to: rgb(180 83 9 / 0);
}

/* ── Hover states ── */
.light-mode .hover\:text-white:hover { color: #0F172A; }
.light-mode .hover\:text-gray-300:hover { color: #1E293B; }
.light-mode .hover\:bg-blue-600:hover { background-color: #92400E; }
.light-mode .hover\:border-white\/10:hover { border-color: rgb(15 23 42 / 0.15); }
.light-mode .hover\:border-white\/20:hover { border-color: rgb(15 23 42 / 0.2); }
.light-mode .hover\:bg-white\/\[0\.02\]:hover { background-color: rgb(15 23 42 / 0.03); }

/* ── Focus states ── */
.light-mode .focus\:border-sitaro-accent\/40:focus { border-color: rgb(180 83 9 / 0.4); }
.light-mode .focus\:bg-sitaro-black:focus { background-color: #FFFFFF; }

/* ── Form placeholders ── */
.light-mode .placeholder-gray-700::placeholder { color: #94A3B8; }

/* ── Terminal tokens (high contrast on light) ── */
.light-mode .token-tag { color: #BE185D; }
.light-mode .token-attr { color: #6D28D9; }
.light-mode .token-value { color: #047857; }
.light-mode .token-text { color: #334155; }
.light-mode .token-comment { color: #64748B; }
.light-mode .token-bracket { color: #475569; }
.light-mode .token-property { color: #0E7490; }
.light-mode .token-css-value { color: #B45309; }
.light-mode .token-selector { color: #BE185D; }

/* ── Hero grid ── */
.light-mode [class*="bg-\[linear-gradient"] {
  background-image: linear-gradient(rgb(0 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 0.05) 1px, transparent 1px) !important;
}

/* ── SVG wave fills ── */
.light-mode svg path[fill="#0A0A0A"] { fill: #FFFFFF; }

/* ── Glow effects ── */
.light-mode .blur-\[120px\],
.light-mode .blur-\[150px\] { opacity: 0.25; }

/* ── Terminal cursor ── */
.light-mode #terminal-cursor { background-color: #B45309; }

/* ── Score glow (light) ── */
.light-mode .score-active {
  animation: score-glow-light 2s ease-in-out infinite;
}

@keyframes score-glow-light {
  0%, 100% { text-shadow: 0 0 8px rgb(16 185 129 / 0.4); }
  50% { text-shadow: 0 0 16px rgb(16 185 129 / 0.7); }
}

/* ── Theme toggle transition ── */
.light-mode { transition: background-color 0.3s ease, color 0.3s ease; }