/* =======================================================
   NON-CRITICAL CSS - Below-the-fold styles
   Loaded asynchronously after initial paint
   ======================================================= */

/* Extended Design Tokens */
:root {
  /* Extended Background Colors */
  --color-bg-tertiary: #ebe8e3;

  /* Extended Text Colors */
  --color-text-quaternary: #a8a5a1;

  /* Extended Accent Colors */
  --color-accent-hover: #c24f2b;
  --color-accent-light: #f5e6e0;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Extended CEFR Colors */
  --color-a1: #e8f5e8;
  --color-a1-border: #90c890;
  --color-a1-text: #2d5a2d;
  --color-a1-hover: #d1f0d1;

  --color-a2: #d4ead4;
  --color-a2-border: #7ab87a;
  --color-a2-text: #1e4d1e;
  --color-a2-hover: #c1e3c1;

  --color-b1: #fff4d6;
  --color-b1-border: #d4a843;
  --color-b1-text: #7a5812;
  --color-b1-hover: #ffefc1;

  --color-b2: #ffe8b3;
  --color-b2-border: #c28f2d;
  --color-b2-text: #5a3b0f;
  --color-b2-hover: #ffd98a;

  --color-c1: #ffe5e5;
  --color-c1-border: #e57373;
  --color-c1-text: #8b2c2c;
  --color-c1-hover: #ffd1d1;

  --color-c2: #ffd4d4;
  --color-c2-border: #d94444;
  --color-c2-text: #6d1a1a;
  --color-c2-hover: #ffc4c4;

  /* Extended Spacing */
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Extended Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Extended Radius */
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* German Word Hover States */
.german-word:hover,
.vocabulary-word:hover {
  background: rgba(52, 152, 219, 0.1);
  border-bottom: 2px solid var(--color-accent);
}

.german-word:active,
.vocabulary-word:active {
  background: rgba(52, 152, 219, 0.2);
  border-bottom: 2px solid #2980b9;
}

.german-word:focus,
.vocabulary-word:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  background: rgba(52, 152, 219, 0.1);
}

/* CEFR Level-specific hover states */
.german-word[data-level="a1"]:hover,
.german-word[data-level="a2"]:hover {
  background: rgba(5, 150, 105, 0.1);
  border-bottom: 2px solid var(--cefr-a1-a2);
}

.german-word[data-level="b1"]:hover,
.german-word[data-level="b2"]:hover {
  background: rgba(217, 119, 6, 0.1);
  border-bottom: 2px solid var(--cefr-b1-b2);
}

.german-word[data-level="c1"]:hover,
.german-word[data-level="c2"]:hover {
  background: rgba(220, 38, 38, 0.1);
  border-bottom: 2px solid var(--cefr-c1-c2);
}

.german-word[data-level="unknown"]:hover {
  background: rgba(8, 145, 178, 0.1);
  border-bottom: 2px solid var(--cefr-unknown);
}

/* No Highlighting Mode */
.german-word.no-highlighting,
.vocabulary-word.no-highlighting {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  color: inherit !important;
}

.german-word.no-highlighting:hover,
.vocabulary-word.no-highlighting:hover {
  background: rgba(59, 130, 246, 0.05) !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Button Secondary */
.btn-secondary {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

/* Card System */
.card {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: var(--transition-base);
  padding: var(--space-6);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(52, 152, 219, 0.2);
}

/* Input System */
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: 1.5;
  transition: var(--transition-base);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  min-height: var(--touch-target);
}

.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  transform: translateY(-1px);
}

.input:hover {
  border-color: rgba(52, 152, 219, 0.3);
}

.input::placeholder {
  color: var(--color-text-muted);
}

/* Status Toggle Styles */
.status-toggle-container {
  display: flex;
  flex-direction: row;
  gap: 1px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.status-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-elevated);
  cursor: pointer;
  transition: var(--transition-base);
  min-height: var(--touch-target-mobile);
  min-width: 140px;
}

.status-toggle:hover {
  background: rgba(52, 152, 219, 0.05);
}

.status-label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.status-indicator {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.status-indicator.off {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.status-indicator.on {
  background: var(--color-a1);
  color: var(--color-a1-text);
}

/* Tooltip Styles */
.vocabulary-tooltip {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1rem;
  max-width: 320px;
  z-index: 1000;
  animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  :root {
    --touch-target: 48px;
  }

  .content-text,
  .story-content,
  .german-text {
    font-size: clamp(1rem, 4vw, 1.125rem);
    line-height: 1.8;
    word-spacing: 0.1em;
  }

  .status-toggle {
    padding: var(--space-3);
    min-width: 120px;
  }

  .card {
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
  }

  .input,
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: var(--space-4);
  }

  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-text-muted);
    border: 2px solid transparent;
    background-clip: content-box;
  }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .content-text {
    font-size: 1.0625rem;
  }
}

/* Progress Bar Stripe Pattern */
.bg-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.3) 2px,
    rgba(255,255,255,0.3) 4px
  );
}