/* Custom fonts - imported before Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

@import "tailwindcss";

/* CSS Variables for theming */
@theme {
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  
  /* Primary colors - Modern Green theme (webklar.com style) */
  --color-primary-50: #f0fdf4;
  --color-primary-100: #dcfce7;
  --color-primary-200: #bbf7d0;
  --color-primary-300: #86efac;
  --color-primary-400: #4ade80;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a;
  --color-primary-700: #15803d;
  --color-primary-800: #166534;
  --color-primary-900: #14532d;
  
  /* Accent colors - Modern Green/Emerald */
  --color-accent-400: #34d399;
  --color-accent-500: #10b981;
  --color-accent-600: #059669;
  
  /* Neutral/Slate colors - Keep original values for Tailwind compatibility */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
}

/* Dark Mode specific color variables for optimized appearance */
:root.dark,
:root[data-theme="dark"] {
  /* Optimized dark mode colors - not pure black, more pleasant */
  --color-bg-dark: #1e293b; /* slate-800 - pleasant dark background */
  --color-bg-card-dark: #334155; /* slate-700 - cards stand out from background */
  --color-text-dark: #f1f5f9; /* slate-100 - soft white, not pure white */
  --color-text-muted-dark: #cbd5e1; /* slate-300 - muted text */
  --color-border-dark: #475569; /* slate-600 - visible but subtle borders */
  --color-accent-dark: #4ade80; /* primary-400 - slightly desaturated for dark mode */
}

/* Prevent double inversion when Dark Reader is active - Force Light Mode */
:root[data-darkreader-mode],
:root[data-darkreader-scheme],
:root[data-darkreader-policy] {
  /* Explicitly remove dark mode classes and force light theme */
  color-scheme: light !important;
}

:root[data-darkreader-mode] body,
:root[data-darkreader-scheme] body,
:root[data-darkreader-policy] body {
  background-color: var(--color-slate-50) !important;
  color: var(--color-slate-900) !important;
}

/* Prevent Dark Reader from applying dark mode when it's active */
:root[data-darkreader-mode] .dark,
:root[data-darkreader-scheme] .dark,
:root[data-darkreader-policy] .dark {
  /* Force light mode styles even if dark class is present */
  background-color: var(--color-slate-50) !important;
  color: var(--color-slate-900) !important;
}

:root[data-darkreader-mode] *,
:root[data-darkreader-scheme] *,
:root[data-darkreader-policy] * {
  /* Prevent Dark Reader from inverting our colors */
  filter: none !important;
}

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Improve touch scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  /* Base colors - Tailwind will handle dark mode */
  background-color: var(--color-slate-50);
  color: var(--color-slate-900);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Dark mode body adjustments */
:root.dark body,
:root[data-theme="dark"] body {
  background-color: var(--color-slate-900);
  color: var(--color-slate-50);
}

/* Improve touch targets on mobile */
@media (max-width: 640px) {
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better tap highlighting */
  * {
    -webkit-tap-highlight-color: rgba(34, 197, 94, 0.1);
  }
}

:root.dark *,
:root[data-theme="dark"] * {
  -webkit-tap-highlight-color: rgba(34, 197, 94, 0.2);
}

/* Touch manipulation for better performance */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Selection styling */
::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

:root.dark ::selection,
:root[data-theme="dark"] ::selection {
  background-color: var(--color-primary-600);
  color: var(--color-primary-50);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-slate-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-slate-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-slate-400);
}

/* Dark mode scrollbar - optimized colors */
:root.dark ::-webkit-scrollbar-track,
:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-bg-card-dark, var(--color-slate-700));
}

:root.dark ::-webkit-scrollbar-thumb,
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border-dark, var(--color-slate-600));
  border-radius: 4px;
}

:root.dark ::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-slate-500);
}

/* Gradient backgrounds */
.gradient-hero {
  background: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-primary-900) 50%, var(--color-slate-800) 100%);
}

:root.dark .gradient-hero,
:root[data-theme="dark"] .gradient-hero {
  background: linear-gradient(135deg, var(--color-slate-950) 0%, var(--color-primary-950) 50%, var(--color-slate-900) 100%);
}

.gradient-mesh {
  background-image: 
    radial-gradient(at 40% 20%, var(--color-primary-500) 0px, transparent 50%),
    radial-gradient(at 80% 0%, var(--color-accent-500) 0px, transparent 50%),
    radial-gradient(at 0% 50%, var(--color-primary-700) 0px, transparent 50%),
    radial-gradient(at 80% 50%, var(--color-accent-400) 0px, transparent 50%),
    radial-gradient(at 0% 100%, var(--color-primary-600) 0px, transparent 50%);
}

:root.dark .gradient-mesh,
:root[data-theme="dark"] .gradient-mesh {
  background-image: 
    radial-gradient(at 40% 20%, rgba(34, 197, 94, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(16, 185, 129, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(22, 163, 74, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(52, 211, 153, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 50%);
  opacity: 0.8;
}

/* Hero edge cards – scroll animation (stick to side, bow out on scroll) */
@keyframes hero-edge-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-edge-card {
  animation: hero-edge-in 0.6s ease-out forwards;
}

/* Bild nur so groß wie der sichtbare Inhalt, keine unsichtbare Box */
.hero-edge-card img {
  display: block;
  max-width: 8rem;
  max-height: 8rem;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
}

.hero-edge-card:nth-child(1) { animation-delay: 0.2s; opacity: 0; }
.hero-edge-card:nth-child(2) { animation-delay: 0.35s; opacity: 0; }
.hero-edge-card:nth-child(3) { animation-delay: 0.5s; opacity: 0; }
.hero-edge-card:nth-child(4) { animation-delay: 0.4s; opacity: 0; }
.hero-edge-card:nth-child(5) { animation-delay: 0.55s; opacity: 0; }
.hero-edge-card:nth-child(6) { animation-delay: 0.7s; opacity: 0; }

@media (max-width: 767px) {
  .hero-edge-card { opacity: 0.2 !important; }
}

/* Animation classes */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.6); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gradient animation for feature card strip (engineering-card style) */
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.animate-gradient-x {
  animation: gradient-x 3s ease infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Stagger animation delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Dark mode specific adjustments */
:root.dark,
:root[data-theme="dark"] {
  /* Ensure good contrast for focus states */
  --focus-ring-color: var(--color-accent-dark, var(--color-primary-400));
  --focus-ring-offset: var(--color-bg-dark, var(--color-slate-800));
}

/* Links in dark mode - optimized for visibility and comfort */
:root.dark a:not([class*="text-"]),
:root[data-theme="dark"] a:not([class*="text-"]) {
  color: var(--color-accent-dark, var(--color-primary-400));
}

:root.dark a:not([class*="text-"]):hover,
:root[data-theme="dark"] a:not([class*="text-"]):hover {
  color: var(--color-primary-300);
}

/* Borders in dark mode - subtle but visible with better contrast */
:root.dark hr:not([class*="border-"]),
:root[data-theme="dark"] hr:not([class*="border-"]) {
  border-color: var(--color-border-dark, var(--color-slate-600));
}

/* Code blocks and pre elements - better contrast */
:root.dark code:not([class]),
:root[data-theme="dark"] code:not([class]),
:root.dark pre:not([class]),
:root[data-theme="dark"] pre:not([class]) {
  background-color: var(--color-bg-card-dark, var(--color-slate-700));
  color: var(--color-text-dark, var(--color-slate-100));
  border-color: var(--color-border-dark, var(--color-slate-600));
}

/* Prevent transitions on initial load to avoid FOUC */
html:not(.dark-mode-initialized) body {
  transition: none;
}
