/**
 * Retro Design System
 * Neo-brutalist retro cards, chips, buttons, pills
 * BEM naming convention
 */

/* ==========================================================================
   Grid Pattern Backgrounds
   ========================================================================== */

.grid-pattern {
  position: relative;
  background-image:
    linear-gradient(to right, oklch(50% 0.2 260 / 0.2) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(50% 0.2 260 / 0.2) 1px, transparent 1px);
  background-size: 40px 40px;
}

.dark .grid-pattern,
:root.dark .grid-pattern {
  background-image:
    linear-gradient(to right, oklch(60% 0.15 250 / 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(60% 0.15 250 / 0.3) 1px, transparent 1px);
}

@media (prefers-color-scheme: dark) {
  .grid-pattern {
    background-image:
      linear-gradient(to right, oklch(60% 0.15 250 / 0.3) 1px, transparent 1px),
      linear-gradient(to bottom, oklch(60% 0.15 250 / 0.3) 1px, transparent 1px);
  }
}

.bg-grid-light {
  background-image:
    linear-gradient(90deg, oklch(65% 0.18 285 / 0.15) 1px, transparent 1px),
    linear-gradient(0deg, oklch(65% 0.18 285 / 0.15) 1px, transparent 1px),
    linear-gradient(90deg, oklch(70% 0.18 350 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(70% 0.18 350 / 0.08) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 40px 40px, 40px 40px;
  background-color: var(--color-bg-page, #f7f4ff);
  background-position: 0 0, 0 0, 0 0, 0 0;
}

.bg-grid-dark {
  background-image:
    linear-gradient(90deg, oklch(65% 0.18 285 / 0.25) 1px, transparent 1px),
    linear-gradient(0deg, oklch(65% 0.18 285 / 0.25) 1px, transparent 1px),
    linear-gradient(90deg, oklch(75% 0.15 280 / 0.15) 1px, transparent 1px),
    linear-gradient(0deg, oklch(75% 0.15 280 / 0.15) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 40px 40px, 40px 40px;
  background-color: var(--color-bg-page-dark, #0b1220);
  background-position: 0 0, 0 0, 0 0, 0 0;
}

/* Bold Red Line */
.bold-red-line {
  width: 4px;
  background-color: oklch(60% 0.25 25);
}

/* Torn Edge */
.torn-edge {
  background-size: cover;
}

/* ==========================================================================
   Retro Card
   ========================================================================== */

.retro-card {
  background: linear-gradient(135deg, oklch(100% 0 0 / 0.98), var(--color-pastel-cream) / 0.9);
  border: var(--border-retro) solid var(--color-shadow-light);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-light), 0 0 0 2px oklch(95% 0.02 0);
  border-radius: var(--radius-retro-lg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.retro-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-light), 0 0 0 2px oklch(95% 0.02 0);
}

.dark .retro-card,
:root.dark .retro-card {
  background: linear-gradient(135deg, oklch(25% 0.02 250 / 0.98), oklch(20% 0.02 260 / 0.95));
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-default), 0 0 0 2px oklch(30% 0.03 250);
}

.dark .retro-card:hover,
:root.dark .retro-card:hover {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-default), 0 0 0 2px oklch(30% 0.03 250);
}

@media (prefers-color-scheme: dark) {
  .retro-card {
    background: linear-gradient(135deg, oklch(25% 0.02 250 / 0.98), oklch(20% 0.02 260 / 0.95));
    border-color: var(--color-border-dark-default);
    box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-default), 0 0 0 2px oklch(30% 0.03 250);
  }
  
  .retro-card:hover {
    box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-default), 0 0 0 2px oklch(30% 0.03 250);
  }
}

/* Retro Card Compact */
.retro-card--compact,
.retro-card-compact {
  background: linear-gradient(135deg, oklch(100% 0 0 / 0.96), oklch(100% 0 0 / 0.9));
  border: 1.5px solid oklch(20% 0.02 260);
  box-shadow: 4px 4px 0 oklch(20% 0.02 260), 0 0 0 1.5px oklch(90% 0 0);
  border-radius: 12px;
}

.dark .retro-card--compact,
.dark .retro-card-compact,
:root.dark .retro-card--compact,
:root.dark .retro-card-compact {
  background: linear-gradient(135deg, oklch(25% 0.02 250 / 0.98), oklch(20% 0.02 260 / 0.95));
  border: 1.5px solid oklch(75% 0.12 270);
  box-shadow: 4px 4px 0 oklch(25% 0.02 250), 0 0 0 1.5px oklch(35% 0.03 250);
}

@media (prefers-color-scheme: dark) {
  .retro-card--compact,
  .retro-card-compact {
    background: linear-gradient(135deg, oklch(25% 0.02 250 / 0.98), oklch(20% 0.02 260 / 0.95));
    border: 1.5px solid oklch(75% 0.12 270);
    box-shadow: 4px 4px 0 oklch(25% 0.02 250), 0 0 0 1.5px oklch(35% 0.03 250);
  }
}

/* ==========================================================================
   Retro Chip
   ========================================================================== */

.retro-chip {
  border: 2px solid var(--color-shadow-light);
  border-radius: 9999px;
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-light);
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-weight: var(--font-bold);
  font-size: 0.75rem;
  background: var(--gradient-retro-rainbow);
  color: var(--color-shadow-light);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.retro-chip:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-retro) var(--color-shadow-light);
}

.retro-chip:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-light);
}

.dark .retro-chip,
:root.dark .retro-chip {
  background: linear-gradient(90deg, oklch(75% 0.14 95), oklch(70% 0.16 350), oklch(70% 0.12 230));
  color: oklch(15% 0.02 260);
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-default);
}

.dark .retro-chip:hover,
:root.dark .retro-chip:hover {
  box-shadow: var(--shadow-retro) var(--color-shadow-dark-default);
}

.dark .retro-chip:active,
:root.dark .retro-chip:active {
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-default);
}

@media (prefers-color-scheme: dark) {
  .retro-chip {
    background: linear-gradient(90deg, oklch(75% 0.14 95), oklch(70% 0.16 350), oklch(70% 0.12 230));
    color: oklch(15% 0.02 260);
    border-color: var(--color-border-dark-default);
    box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-default);
  }
  
  .retro-chip:hover {
    box-shadow: var(--shadow-retro) var(--color-shadow-dark-default);
  }
  
  .retro-chip:active {
    box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-default);
  }
}

/* Retro Chip Compact */
.retro-chip--compact,
.retro-chip-compact {
  border: 1.5px solid oklch(20% 0.02 260);
  border-radius: 9999px;
  box-shadow: 2px 2px 0 oklch(20% 0.02 260);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  background: linear-gradient(90deg, oklch(95% 0.08 85), oklch(90% 0.12 350), oklch(85% 0.1 250));
  color: oklch(20% 0.02 260);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

.retro-chip--compact:hover,
.retro-chip-compact:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 oklch(20% 0.02 260);
}

.retro-chip--compact:active,
.retro-chip-compact:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 oklch(20% 0.02 260);
}

.dark .retro-chip--compact,
.dark .retro-chip-compact,
:root.dark .retro-chip--compact,
:root.dark .retro-chip-compact {
  background: linear-gradient(90deg, oklch(70% 0.18 350), oklch(65% 0.18 280), oklch(70% 0.15 250));
  color: oklch(15% 0.02 260);
  border-color: oklch(75% 0.12 270);
  box-shadow: 2px 2px 0 oklch(25% 0.02 250);
}

.dark .retro-chip--compact:hover,
.dark .retro-chip-compact:hover,
:root.dark .retro-chip--compact:hover,
:root.dark .retro-chip-compact:hover {
  box-shadow: 3px 3px 0 oklch(25% 0.02 250);
}

@media (prefers-color-scheme: dark) {
  .retro-chip--compact,
  .retro-chip-compact {
    background: linear-gradient(90deg, oklch(70% 0.18 350), oklch(65% 0.18 280), oklch(70% 0.15 250));
    color: oklch(15% 0.02 260);
    border-color: oklch(75% 0.12 270);
    box-shadow: 2px 2px 0 oklch(25% 0.02 250);
  }
  
  .retro-chip--compact:hover,
  .retro-chip-compact:hover {
    box-shadow: 3px 3px 0 oklch(25% 0.02 250);
  }
}

/* ==========================================================================
   Retro Button
   ========================================================================== */

.retro-button {
  border: var(--border-retro) solid var(--color-shadow-light);
  border-radius: var(--radius-retro);
  box-shadow: var(--shadow-retro) var(--color-shadow-light);
  background: var(--gradient-retro-rainbow);
  color: var(--color-shadow-light);
  padding: 0.5rem 1rem;
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.retro-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-light);
}

.retro-button:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-light);
}

.dark .retro-button,
:root.dark .retro-button {
  background: linear-gradient(90deg, oklch(75% 0.14 95), oklch(70% 0.16 350), oklch(70% 0.12 230));
  color: oklch(15% 0.02 260);
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro) var(--color-shadow-dark-default);
}

.dark .retro-button:hover,
:root.dark .retro-button:hover {
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-default);
}

.dark .retro-button:active,
:root.dark .retro-button:active {
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-default);
}

@media (prefers-color-scheme: dark) {
  .retro-button {
    background: linear-gradient(90deg, oklch(75% 0.14 95), oklch(70% 0.16 350), oklch(70% 0.12 230));
    color: oklch(15% 0.02 260);
    border-color: var(--color-border-dark-default);
    box-shadow: var(--shadow-retro) var(--color-shadow-dark-default);
  }
  
  .retro-button:hover {
    box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-default);
  }
  
  .retro-button:active {
    box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-default);
  }
}

/* Retro Button Compact */
.retro-button--compact,
.retro-button-compact {
  border: 1.5px solid oklch(20% 0.02 260);
  border-radius: 8px;
  box-shadow: 3px 3px 0 oklch(20% 0.02 260);
  background: linear-gradient(90deg, oklch(95% 0.08 85), oklch(90% 0.12 350), oklch(85% 0.1 250));
  color: oklch(20% 0.02 260);
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.retro-button--compact:hover,
.retro-button-compact:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 oklch(20% 0.02 260);
}

.dark .retro-button--compact,
.dark .retro-button-compact,
:root.dark .retro-button--compact,
:root.dark .retro-button-compact {
  background: linear-gradient(90deg, oklch(70% 0.18 350), oklch(65% 0.18 280), oklch(70% 0.15 250));
  color: oklch(15% 0.02 260);
  border-color: oklch(75% 0.12 270);
}

.dark .retro-button--compact:hover,
.dark .retro-button-compact:hover,
:root.dark .retro-button--compact:hover,
:root.dark .retro-button-compact:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 oklch(25% 0.02 250);
}

@media (prefers-color-scheme: dark) {
  .retro-button--compact,
  .retro-button-compact {
    background: linear-gradient(90deg, oklch(70% 0.18 350), oklch(65% 0.18 280), oklch(70% 0.15 250));
    color: oklch(15% 0.02 260);
    border-color: oklch(75% 0.12 270);
  }
  
  .retro-button--compact:hover,
  .retro-button-compact:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 oklch(25% 0.02 250);
  }
}

/* ==========================================================================
   Retro Pill
   ========================================================================== */

.retro-pill {
  border: 2px solid var(--color-shadow-light);
  border-radius: 9999px;
  background: var(--color-pastel-yellow);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-light);
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  font-weight: var(--font-bold);
  font-size: 0.875rem;
  color: var(--color-shadow-light);
}

.dark .retro-pill,
:root.dark .retro-pill {
  background: oklch(55% 0.14 95);
  border-color: var(--color-border-dark-amber);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-amber);
  color: oklch(15% 0.02 95);
}

@media (prefers-color-scheme: dark) {
  .retro-pill {
    background: oklch(55% 0.14 95);
    border-color: var(--color-border-dark-amber);
    box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-amber);
    color: oklch(15% 0.02 95);
  }
}

/* Retro Pill Variants - FastRetro pastel style */
.retro-pill--pink {
  background: var(--color-pastel-pink);
  color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-sm) oklch(55% 0.15 350);
}

.retro-pill--sky {
  background: var(--color-pastel-blue);
  color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-sm) oklch(45% 0.12 230);
}

.retro-pill--amber {
  background: var(--color-pastel-yellow);
  color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-sm) oklch(55% 0.14 85);
}

.retro-pill--violet {
  background: var(--color-pastel-lavender);
  color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-sm) oklch(45% 0.14 285);
}

/* Dark mode pill variants */
.dark .retro-pill--pink,
:root.dark .retro-pill--pink {
  background: oklch(55% 0.16 350);
  color: oklch(95% 0.02 350);
  border-color: var(--color-border-dark-pink);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-pink);
}

.dark .retro-pill--sky,
:root.dark .retro-pill--sky {
  background: oklch(50% 0.12 230);
  color: oklch(95% 0.02 230);
  border-color: var(--color-border-dark-sky);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-sky);
}

.dark .retro-pill--amber,
:root.dark .retro-pill--amber {
  background: oklch(60% 0.14 85);
  color: oklch(15% 0.02 85);
  border-color: var(--color-border-dark-amber);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-amber);
}

.dark .retro-pill--violet,
:root.dark .retro-pill--violet {
  background: oklch(50% 0.14 285);
  color: oklch(95% 0.02 285);
  border-color: var(--color-border-dark-violet);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-violet);
}

/* ==========================================================================
   Paper Texture
   ========================================================================== */

.paper-texture {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}