/* 폰트는 css/fonts.css(자체 호스팅)로 분리했다. index.html이 직접 <link>로 먼저 읽는다.
   @import는 "main.css 수신 → @import 발견 → 폰트 CSS 요청 → woff2 요청"의 직렬 왕복을
   만들어 렌더를 지연시켰고, 오프라인에서는 아예 폰트가 오지 않았다. */

/* ============================================================================
   Stitch Design System: Multi-Skin Dynamic Theme Engine
   ============================================================================ */

:root {
  color-scheme: only light;
  --primary-color: #0052FF;
  --primary-dark: #0041CC;
  --primary-light-bg: #EFF6FF;
  --primary-light-border: #DBEAFE;
}

[data-skin="blue"] {
  --primary-color: #0052FF;
  --primary-dark: #0041CC;
  --primary-light-bg: #EFF6FF;
  --primary-light-border: #DBEAFE;
}

[data-skin="carrot"] {
  --primary-color: #FF6F0F;
  --primary-dark: #EA580C;
  --primary-light-bg: #FFF7ED;
  --primary-light-border: #FFEDD5;
}

[data-skin="emerald"] {
  --primary-color: #059669;
  --primary-dark: #047857;
  --primary-light-bg: #ECFDF5;
  --primary-light-border: #D1FAE5;
}

[data-skin="purple"] {
  --primary-color: #6366F1;
  --primary-dark: #4F46E5;
  --primary-light-bg: #EEF2FF;
  --primary-light-border: #E0E7FF;
}

html.dark {
  color-scheme: dark;
}

html, body {
  background-color: #FAF7F2;
  color: #1A202C;
  margin: 0;
  padding: 0;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   🎨 DYNAMIC PRIMARY SKIN OVERRIDES
   ============================================================================ */
.bg-\[\#0052FF\] {
  background-color: var(--primary-color) !important;
}

.text-\[\#0052FF\] {
  color: var(--primary-color) !important;
}

.border-\[\#0052FF\] {
  border-color: var(--primary-color) !important;
}

.hover\:border-\[\#0052FF\]:hover {
  border-color: var(--primary-color) !important;
}

.hover\:text-\[\#0052FF\]:hover {
  color: var(--primary-color) !important;
}

.hover\:bg-blue-600:hover {
  background-color: var(--primary-dark) !important;
}

.accent-\[\#0052FF\] {
  accent-color: var(--primary-color) !important;
}

/* Light background and border tones for dynamic skins */
.bg-blue-50, .bg-blue-50\/70, .bg-blue-50\/50 {
  background-color: var(--primary-light-bg) !important;
}

.bg-blue-100 {
  background-color: var(--primary-light-border) !important;
}

.border-blue-100, .border-blue-200, .border-blue-100\/60, .border-blue-100\/80, .border-blue-200\/60, .border-blue-200\/70, .border-blue-200\/80 {
  border-color: var(--primary-light-border) !important;
}

.text-blue-400, .text-blue-600 {
  color: var(--primary-color) !important;
}

/* ============================================================================
   🎨 DYNAMIC SVG VECTOR ICON SKIN OVERRIDES (NEXUS_ARCH_003 §12-4)
   ============================================================================ */
svg [fill="#0052FF"], svg [fill="#0052ff"] {
  fill: var(--primary-color) !important;
}

svg [stroke="#0052FF"], svg [stroke="#0052ff"] {
  stroke: var(--primary-color) !important;
}

svg [fill="#1D4ED8"], svg [fill="#1E40AF"] {
  fill: var(--primary-dark) !important;
}

svg [stroke="#1D4ED8"], svg [stroke="#1E40AF"] {
  stroke: var(--primary-dark) !important;
}

svg [fill="#3B82F6"], svg [fill="#60A5FA"] {
  fill: var(--primary-color) !important;
  opacity: 0.85;
}

svg [stroke="#3B82F6"], svg [stroke="#60A5FA"] {
  stroke: var(--primary-color) !important;
}

svg [fill="#93C5FD"], svg [fill="#BAE6FD"] {
  fill: var(--primary-light-border) !important;
}

/* ============================================================================
   ☀️ 100% SOLID OPAQUE LIGHT MODE (Overrides Chrome Incognito Dark Canvas)
   ============================================================================ */
html:not(.dark),
html:not(.dark) body {
  color-scheme: only light !important;
  background-color: #FAF7F2 !important;
  color: #191C1D !important;
}

html:not(.dark) #app,
html:not(.dark) #app > div,
html:not(.dark) main,
html:not(.dark) #tabViewport,
html:not(.dark) section,
html:not(.dark) [class*="bg-[#FAF7F2]"],
html:not(.dark) [class*="dark:bg-[#0E1217]"],
html:not(.dark) [class*="dark:bg-[#12161C]"] {
  background-color: #FAF7F2 !important;
  color: #191C1D !important;
}

html:not(.dark) .bg-white,
html:not(.dark) nav,
html:not(.dark) header:not(#p0AppHeader),
html:not(.dark) article,
html:not(.dark) #skinModalSheet,
html:not(.dark) #sandwichMenuModalSheet,
html:not(.dark) [class*="dark:bg-[#181E27]"],
html:not(.dark) [class*="dark:bg-[#1E242D]"] {
  background-color: #FFFFFF !important;
  color: #111827 !important;
}

html:not(.dark) .text-gray-900,
html:not(.dark) [class*="dark:text-gray-100"],
html:not(.dark) [class*="dark:text-gray-200"],
html:not(.dark) [class*="dark:text-gray-300"] {
  color: #111827 !important;
}

html:not(.dark) .text-gray-800 {
  color: #1F2937 !important;
}

html:not(.dark) .text-gray-700 {
  color: #374151 !important;
}

html:not(.dark) .text-gray-600 {
  color: #4B5563 !important;
}

html:not(.dark) .text-gray-500,
html:not(.dark) [class*="dark:text-gray-400"] {
  color: #6B7280 !important;
}

html:not(.dark) .text-gray-400 {
  color: #9CA3AF !important;
}

html:not(.dark) .border-gray-200,
html:not(.dark) [class*="dark:border-gray-800"],
html:not(.dark) [class*="dark:border-gray-700"] {
  border-color: #E5E7EB !important;
}

html:not(.dark) .border-gray-100 {
  border-color: #F3F4F6 !important;
}

/* ============================================================================
   🛡️ CHROME INCOGNITO SOLID INTERCEPTOR: Neutralize Incognito Dark Force
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  html:not(.dark),
  html:not(.dark) body {
    background-color: #FAF7F2 !important;
    color: #191C1D !important;
  }

  html:not(.dark) #app,
  html:not(.dark) #app > div,
  html:not(.dark) main,
  html:not(.dark) #tabViewport,
  html:not(.dark) section,
  html:not(.dark) [class*="bg-[#FAF7F2]"],
  html:not(.dark) [class*="dark:bg-[#0E1217]"],
  html:not(.dark) [class*="dark:bg-[#12161C]"] {
    background-color: #FAF7F2 !important;
    color: #191C1D !important;
  }

  html:not(.dark) .bg-white,
  html:not(.dark) nav,
  html:not(.dark) header:not(#p0AppHeader),
  html:not(.dark) article,
  html:not(.dark) #skinModalSheet,
  html:not(.dark) #sandwichMenuModalSheet,
  html:not(.dark) [class*="dark:bg-[#181E27]"],
  html:not(.dark) [class*="dark:bg-[#1E242D]"] {
    background-color: #FFFFFF !important;
    color: #111827 !important;
  }

  html:not(.dark) .text-gray-900,
  html:not(.dark) [class*="dark:text-gray-100"],
  html:not(.dark) [class*="dark:text-gray-200"],
  html:not(.dark) [class*="dark:text-gray-300"] {
    color: #111827 !important;
  }

  html:not(.dark) .border-gray-200,
  html:not(.dark) [class*="dark:border-gray-800"],
  html:not(.dark) [class*="dark:border-gray-700"] {
    border-color: #E5E7EB !important;
  }
}

/* ============================================================================
   🌙 DARK MODE OVERRIDES (Active only when html has class="dark")
   ============================================================================ */
html.dark body {
  background-color: #0E1217 !important;
  color: #F8F9FA !important;
}

html.dark #app > div {
  background-color: #0E1217 !important;
  border-color: #1F2937 !important;
}

html.dark [class*="dark:bg-[#0E1217]"] {
  background-color: #0E1217 !important;
}

html.dark [class*="dark:bg-[#12161C]"] {
  background-color: #12161C !important;
}

html.dark [class*="dark:bg-[#181E27]"] {
  background-color: #181E27 !important;
}

html.dark [class*="dark:bg-[#1E242D]"] {
  background-color: #1E242D !important;
}

html.dark .bg-white {
  background-color: #181E27 !important;
}

html.dark .bg-\[\#FAF7F2\] {
  background-color: #12161C !important;
}

html.dark .text-gray-900 {
  color: #F8F9FA !important;
}

html.dark .text-gray-800 {
  color: #E2E8F0 !important;
}

html.dark .text-gray-700 {
  color: #CBD5E1 !important;
}

html.dark .text-gray-600 {
  color: #94A3B8 !important;
}

html.dark .text-gray-500 {
  color: #64748B !important;
}

html.dark .border-gray-200 {
  border-color: #1F2937 !important;
}

html.dark .border-gray-100 {
  border-color: #1F2937 !important;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.hide-scrollbar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar,
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}