@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================
   CSS Variables for Theming
   ======================================== */
:root {
  /* Default (Cyberpunk) theme */
  --color-primary: #00f3ff;
  --color-primary-rgb: 0, 243, 255;
  --color-secondary: #bc13fe;
  --color-secondary-rgb: 188, 19, 254;
  --color-accent: #ff0099;
  --color-success: #0aff00;
  --color-error: #ff0055;
  --color-warning: #ffe600;
  --color-bg-primary: #020617;
  --color-bg-secondary: #0f172a;
  --color-bg-tertiary: #1e293b;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-border: rgba(0, 243, 255, 0.2);
  --border-radius: 0px;
}

/* ========================================
   Custom Scrollbar (Theme-aware)
   ======================================== */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb), 0.3);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb), 0.6);
}

/* ========================================
   Theme: Cyberpunk (Default)
   ======================================== */
[data-theme="cyberpunk"] .glass-holo,
.glass-holo {
  background: linear-gradient(135deg, rgba(10, 15, 30, 0.7) 0%, rgba(20, 30, 50, 0.5) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

[data-theme="cyberpunk"] .glass-holo::before,
.glass-holo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.5), transparent);
}

/* Active Element */
.glass-active {
  background: rgba(var(--color-primary-rgb), 0.1);
  border: 1px solid rgba(var(--color-primary-rgb), 0.4);
  box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
}

/* Text Glows */
.text-glow-blue {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.6);
}

.text-glow-purple {
  color: var(--color-secondary);
  text-shadow: 0 0 8px rgba(var(--color-secondary-rgb), 0.6);
}

.text-glow-red {
  color: var(--color-error);
  text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
}

.text-glow-green {
  color: var(--color-success);
  text-shadow: 0 0 8px rgba(10, 255, 0, 0.6);
}

/* Primary text glow (theme-aware) */
.text-glow-primary {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.6);
}

/* Grid Background */
.grid-bg {
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

/* CRT Scanline Effect */
.scanlines {
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.2));
  background-size: 100% 4px;
  pointer-events: none;
}

/* Tech Clip Path */
.clip-tech {
  clip-path: polygon(0 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%);
}

.clip-tech-inv {
  clip-path: polygon(10px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 10px);
}

/* ========================================
   Theme: Windows Classic
   ======================================== */
[data-theme="windows-classic"] {
  font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif !important;
}

[data-theme="windows-classic"] .glass-holo {
  background: #c0c0c0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px outset #dfdfdf;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
  border-radius: 0;
}

[data-theme="windows-classic"] .glass-holo::before {
  display: none;
}

[data-theme="windows-classic"] .text-glow-blue,
[data-theme="windows-classic"] .text-glow-primary {
  color: #000080;
  text-shadow: none;
}

[data-theme="windows-classic"] .text-glow-green {
  color: #008000;
  text-shadow: none;
}

[data-theme="windows-classic"] .text-glow-red {
  color: #ff0000;
  text-shadow: none;
}

[data-theme="windows-classic"] .grid-bg,
[data-theme="windows-classic"] .scanlines {
  display: none;
}

/* Windows Classic Button Style */
[data-theme="windows-classic"] .win-button {
  background: #c0c0c0;
  border: 2px outset #dfdfdf;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
  padding: 4px 16px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
}

[data-theme="windows-classic"] .win-button:active {
  border: 2px inset #808080;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

/* Windows Classic Title Bar */
[data-theme="windows-classic"] .win-titlebar {
  background: linear-gradient(to right, #000080, #1084d0);
  color: white;
  font-weight: bold;
  padding: 2px 4px;
}

/* Windows Classic Input */
[data-theme="windows-classic"] input,
[data-theme="windows-classic"] select {
  background: white;
  border: 2px inset #808080;
  padding: 2px 4px;
}

/* ========================================
   Theme: Dark Modern
   ======================================== */
[data-theme="dark-modern"] .glass-holo {
  background: rgba(24, 24, 27, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(63, 63, 70, 0.5);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

[data-theme="dark-modern"] .glass-holo::before {
  display: none;
}

[data-theme="dark-modern"] .text-glow-blue,
[data-theme="dark-modern"] .text-glow-primary {
  color: #3b82f6;
  text-shadow: none;
}

[data-theme="dark-modern"] .text-glow-green {
  color: #22c55e;
  text-shadow: none;
}

[data-theme="dark-modern"] .text-glow-red {
  color: #ef4444;
  text-shadow: none;
}

[data-theme="dark-modern"] .grid-bg,
[data-theme="dark-modern"] .scanlines {
  display: none;
}

[data-theme="dark-modern"] .clip-tech,
[data-theme="dark-modern"] .clip-tech-inv {
  clip-path: none;
  border-radius: 8px;
}

/* ========================================
   Theme: Matrix
   ======================================== */
[data-theme="matrix"] .glass-holo {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: none;
  border: 1px solid rgba(0, 255, 0, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.1), inset 0 0 20px rgba(0, 255, 0, 0.05);
}

[data-theme="matrix"] .glass-holo::before {
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.5), transparent);
}

[data-theme="matrix"] .text-glow-blue,
[data-theme="matrix"] .text-glow-primary {
  color: #00ff00;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

[data-theme="matrix"] .text-glow-green {
  color: #00ff00;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

[data-theme="matrix"] .text-glow-red {
  color: #ff0000;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
}

[data-theme="matrix"] body {
  background: #000000 !important;
}

[data-theme="matrix"] .grid-bg {
  display: none;
}

/* Matrix rain effect - optional */
[data-theme="matrix"] .scanlines {
  background: linear-gradient(to bottom,
      rgba(0, 255, 0, 0),
      rgba(0, 255, 0, 0) 50%,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.3));
  background-size: 100% 3px;
}

/* ========================================
   Theme: Industrial
   ======================================== */
[data-theme="industrial"] .glass-holo {
  background: rgba(28, 25, 23, 0.95);
  backdrop-filter: none;
  border: 2px solid rgba(249, 115, 22, 0.3);
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.1);
  border-radius: 4px;
}

[data-theme="industrial"] .glass-holo::before {
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.5), transparent);
}

[data-theme="industrial"] .text-glow-blue,
[data-theme="industrial"] .text-glow-primary {
  color: #f97316;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}

[data-theme="industrial"] .text-glow-green {
  color: #16a34a;
  text-shadow: 0 0 8px rgba(22, 163, 74, 0.6);
}

[data-theme="industrial"] .text-glow-red {
  color: #dc2626;
  text-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

[data-theme="industrial"] .grid-bg,
[data-theme="industrial"] .scanlines {
  display: none;
}

/* Industrial warning stripes */
[data-theme="industrial"] .industrial-stripe {
  background: repeating-linear-gradient(
    45deg,
    #f97316,
    #f97316 10px,
    #000000 10px,
    #000000 20px
  );
}

/* ========================================
   Theme: Otaku Mode (애니메이션/오타쿠 스타일)
   ======================================== */
[data-theme="otaku"] .glass-holo {
  background: linear-gradient(135deg, rgba(26, 16, 37, 0.85) 0%, rgba(45, 31, 61, 0.75) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(255, 107, 157, 0.3);
  box-shadow:
    0 0 30px rgba(255, 107, 157, 0.15),
    0 0 60px rgba(192, 132, 252, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

[data-theme="otaku"] .glass-holo::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 107, 157, 0.6),
    rgba(192, 132, 252, 0.6),
    transparent);
}

[data-theme="otaku"] .text-glow-blue,
[data-theme="otaku"] .text-glow-primary {
  color: #ff6b9d;
  text-shadow:
    0 0 10px rgba(255, 107, 157, 0.8),
    0 0 20px rgba(255, 107, 157, 0.4),
    0 0 30px rgba(192, 132, 252, 0.3);
}

[data-theme="otaku"] .text-glow-green {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

[data-theme="otaku"] .text-glow-red {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.6);
}

/* Otaku 특수 효과 - 반짝이는 별 그리드 */
[data-theme="otaku"] .grid-bg {
  background-size: 30px 30px;
  background-image:
    radial-gradient(circle, rgba(255, 107, 157, 0.15) 1px, transparent 1px),
    radial-gradient(circle, rgba(192, 132, 252, 0.1) 1px, transparent 1px);
  background-position: 0 0, 15px 15px;
  mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
}

[data-theme="otaku"] .scanlines {
  display: none;
}

/* 귀여운 라운드 버튼 스타일 */
[data-theme="otaku"] .clip-tech,
[data-theme="otaku"] .clip-tech-inv {
  clip-path: none;
  border-radius: 12px;
}

/* ========================================
   Theme: Pink Pink (귀여운 파스텔 핑크)
   ======================================== */
[data-theme="pink-pink"] .glass-holo {
  background: linear-gradient(135deg, rgba(255, 240, 245, 0.95) 0%, rgba(255, 228, 233, 0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 105, 180, 0.4);
  box-shadow:
    0 4px 20px rgba(255, 105, 180, 0.2),
    0 0 40px rgba(255, 20, 147, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  border-radius: 16px;
}

[data-theme="pink-pink"] .glass-holo::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 105, 180, 0.5),
    rgba(255, 20, 147, 0.5),
    transparent);
  height: 2px;
}

[data-theme="pink-pink"] .text-glow-blue,
[data-theme="pink-pink"] .text-glow-primary {
  color: #ff69b4;
  text-shadow:
    0 0 8px rgba(255, 105, 180, 0.5),
    0 0 16px rgba(255, 20, 147, 0.3);
}

[data-theme="pink-pink"] .text-glow-green {
  color: #2e8b57;
  text-shadow: 0 0 8px rgba(46, 139, 87, 0.4);
}

[data-theme="pink-pink"] .text-glow-red {
  color: #ff6b6b;
  text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

[data-theme="pink-pink"] .grid-bg,
[data-theme="pink-pink"] .scanlines {
  display: none;
}

/* 핑크 테마 특수 - 하트 패턴 배경 (선택적) */
[data-theme="pink-pink"] .pink-hearts {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff69b4' fill-opacity='0.1' d='M10 3.5c1.5-2 4-2 5.5 0s1.5 5.5-5.5 10c-7-4.5-7-8-5.5-10s4-2 5.5 0z'/%3E%3C/svg%3E");
}

/* 핑크 테마 버튼 스타일 */
[data-theme="pink-pink"] .clip-tech,
[data-theme="pink-pink"] .clip-tech-inv {
  clip-path: none;
  border-radius: 16px;
}

/* 핑크 테마 스크롤바 */
[data-theme="pink-pink"]::-webkit-scrollbar-thumb {
  background: rgba(255, 105, 180, 0.5);
  border-radius: 4px;
}

[data-theme="pink-pink"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 105, 180, 0.8);
}

/* ========================================
   Theme-aware utility classes
   ======================================== */
.theme-bg-primary {
  background-color: var(--color-bg-primary);
}

.theme-bg-secondary {
  background-color: var(--color-bg-secondary);
}

.theme-bg-tertiary {
  background-color: var(--color-bg-tertiary);
}

.theme-text-primary {
  color: var(--color-text-primary);
}

.theme-text-secondary {
  color: var(--color-text-secondary);
}

.theme-border {
  border-color: var(--color-border);
}

.theme-accent {
  color: var(--color-primary);
}

.theme-glow {
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

/* ========================================
   Disable effects for non-effect themes
   ======================================== */
[data-theme="windows-classic"] .animate-pulse,
[data-theme="windows-classic"] .animate-glow,
[data-theme="windows-classic"] .animate-gradient {
  animation: none !important;
}