/* =======================================================
   CRITICAL CSS - Above-the-fold styles
   Inlined for optimal First Contentful Paint (FCP)
   ======================================================= */

/* DESIGN TOKENS - Core variables */
:root {
  /* Background Colors */
  --color-bg-primary: #faf9f7;
  --color-bg-secondary: #f5f3f0;
  --color-bg-elevated: #ffffff;

  /* Text Colors */
  --color-text-primary: #1a1918;
  --color-text-secondary: #5c5956;
  --color-text-muted: #8b8680;

  /* Accent & Borders */
  --color-accent: #dc6039;
  --color-border: rgba(26, 25, 24, 0.08);

  /* CEFR Colors (Critical for word highlighting) */
  --cefr-a1-a2: #059669;
  --cefr-b1-b2: #d97706;
  --cefr-c1-c2: #dc2626;
  --cefr-unknown: #0891b2;

  /* Spacing & Typography */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --font-size-base: 1rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;

  /* Touch Targets */
  --touch-target: 44px;
  --touch-target-mobile: 48px;
}

/* Font Loading Optimization - Prevent FOIT */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Playfair Display');
}

/* Base Reset - Critical only */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* Critical Layout Styles */
.min-h-screen {
  min-height: 100vh;
}

/* Navigation - Above the fold */
.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.z-50 {
  z-index: 50;
}

/* Flexbox utilities - Critical */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

/* Container - Critical */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Button System - Critical */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  min-height: var(--touch-target);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: white;
}

.btn-primary:hover {
  background: #c24f2b;
  transform: translateY(-1px);
}

/* German Word Highlighting - Critical for core feature */
.german-word,
.vocabulary-word {
  background: transparent;
  color: inherit;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  position: relative;
  display: inline;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 2px dotted var(--color-accent);
  min-height: var(--touch-target);
  line-height: 1.6;
}

.german-word[data-level="a1"],
.german-word[data-level="a2"] {
  border-bottom: 2px dotted var(--cefr-a1-a2);
}

.german-word[data-level="b1"],
.german-word[data-level="b2"] {
  border-bottom: 2px dotted var(--cefr-b1-b2);
}

.german-word[data-level="c1"],
.german-word[data-level="c2"] {
  border-bottom: 2px dotted var(--cefr-c1-c2);
}

.german-word[data-level="unknown"] {
  border-bottom: 2px dotted var(--cefr-unknown);
}

/* Loading States - Critical */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Mobile Touch Optimization - Critical */
@media (hover: none) and (pointer: coarse) {
  .german-word,
  .vocabulary-word {
    padding: var(--space-2) var(--space-3);
    border-bottom: 3px dotted;
    min-height: var(--touch-target-mobile);
    min-width: 36px;
  }

  button,
  .btn {
    min-height: var(--touch-target-mobile);
  }
}

/* Newsletter Banner Space Reservation - Prevent CLS */
.newsletter-banner-reserved {
  min-height: 80px;
  transition: all 0.3s ease;
}

.newsletter-banner-reserved.hidden {
  min-height: 0;
  overflow: hidden;
}

/* Accessibility - Skip Links (WCAG 2.1 Compliance) */
.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: none;
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.skip-link:hover {
  background: rgba(220, 96, 57, 0.1);
  color: var(--color-accent);
}