/* ==========================================================================
   Paperlogy Web Font Definition (Project Noonnu CDN)
   ========================================================================== */
@font-face {
  font-family: 'Paperlogy';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Color Theme Palettes (Option A, B, C, D)
   ========================================================================== */

/* 1. Option A: Warm Mocha & Cream (Default) */
:root, [data-color-theme="mocha"] {
  --theme-bg-page: #FBF9F5;
  --theme-bg-card: #FFFFFF;
  --theme-border: #ECE4D9;
  --theme-accent: #785238;
  --theme-accent-hover: #63422C;
  --theme-accent-gradient: linear-gradient(135deg, #8C6243 0%, #6F4A30 100%);
  --theme-accent-sub: #F5EEE6;
  --theme-accent-text: #785238;
  --theme-shadow: rgba(120, 82, 56, 0.22);
  --theme-badge-bg: #F5EEE6;
  --theme-badge-text: #785238;
}

.dark:root, .dark[data-color-theme="mocha"], html.dark[data-color-theme="mocha"] {
  --theme-bg-page: #141211;
  --theme-bg-card: #1E1A17;
  --theme-border: #2E2823;
  --theme-accent: #B0825E;
  --theme-accent-hover: #C59670;
  --theme-accent-gradient: linear-gradient(135deg, #B0825E 0%, #946643 100%);
  --theme-accent-sub: #2B231D;
  --theme-accent-text: #D6A884;
  --theme-shadow: rgba(176, 130, 94, 0.2);
  --theme-badge-bg: #2B231D;
  --theme-badge-text: #D6A884;
}

/* 2. Option B: Minimal Slate & Mono */
[data-color-theme="mono"] {
  --theme-bg-page: #F8FAFC;
  --theme-bg-card: #FFFFFF;
  --theme-border: #E2E8F0;
  --theme-accent: #0F172A;
  --theme-accent-hover: #1E293B;
  --theme-accent-gradient: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  --theme-accent-sub: #F1F5F9;
  --theme-accent-text: #0F172A;
  --theme-shadow: rgba(15, 23, 42, 0.18);
  --theme-badge-bg: #F1F5F9;
  --theme-badge-text: #0F172A;
}

.dark[data-color-theme="mono"], html.dark[data-color-theme="mono"] {
  --theme-bg-page: #09090B;
  --theme-bg-card: #18181B;
  --theme-border: #27272A;
  --theme-accent: #FAFAFA;
  --theme-accent-hover: #E4E4E7;
  --theme-accent-gradient: linear-gradient(135deg, #FAFAFA 0%, #E4E4E7 100%);
  --theme-accent-sub: #27272A;
  --theme-accent-text: #18181B;
  --theme-shadow: rgba(255, 255, 255, 0.1);
  --theme-badge-bg: #27272A;
  --theme-badge-text: #FAFAFA;
}

/* 3. Option C: Muted Sage & Olive */
[data-color-theme="sage"] {
  --theme-bg-page: #F4F7F4;
  --theme-bg-card: #FFFFFF;
  --theme-border: #E1E8E2;
  --theme-accent: #2D5843;
  --theme-accent-hover: #224333;
  --theme-accent-gradient: linear-gradient(135deg, #376B52 0%, #264C39 100%);
  --theme-accent-sub: #E8F0EA;
  --theme-accent-text: #2D5843;
  --theme-shadow: rgba(45, 88, 67, 0.2);
  --theme-badge-bg: #E8F0EA;
  --theme-badge-text: #2D5843;
}

.dark[data-color-theme="sage"], html.dark[data-color-theme="sage"] {
  --theme-bg-page: #0F1411;
  --theme-bg-card: #17211B;
  --theme-border: #24332A;
  --theme-accent: #589675;
  --theme-accent-hover: #6BAA88;
  --theme-accent-gradient: linear-gradient(135deg, #589675 0%, #447A5D 100%);
  --theme-accent-sub: #1D2E24;
  --theme-accent-text: #7EC29E;
  --theme-shadow: rgba(88, 150, 117, 0.18);
  --theme-badge-bg: #1D2E24;
  --theme-badge-text: #7EC29E;
}

/* 4. Option D: Deep Indigo & Brand */
[data-color-theme="indigo"] {
  --theme-bg-page: #F8FAFC;
  --theme-bg-card: #FFFFFF;
  --theme-border: #E2E8F0;
  --theme-accent: #4F46E5;
  --theme-accent-hover: #4338CA;
  --theme-accent-gradient: linear-gradient(135deg, #6366F1 0%, #4338CA 100%);
  --theme-accent-sub: #EEF2FF;
  --theme-accent-text: #4F46E5;
  --theme-shadow: rgba(79, 70, 229, 0.22);
  --theme-badge-bg: #EEF2FF;
  --theme-badge-text: #4F46E5;
}

.dark[data-color-theme="indigo"], html.dark[data-color-theme="indigo"] {
  --theme-bg-page: #09090B;
  --theme-bg-card: #13131A;
  --theme-border: #232330;
  --theme-accent: #6366F1;
  --theme-accent-hover: #818CF8;
  --theme-accent-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  --theme-accent-sub: #1E1C38;
  --theme-accent-text: #A5B4FC;
  --theme-shadow: rgba(99, 102, 241, 0.2);
  --theme-badge-bg: #1E1C38;
  --theme-badge-text: #A5B4FC;
}

/* ==========================================================================
   Global Base Styling with Theme Variables
   ========================================================================== */
* {
  font-family: 'Paperlogy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

body {
  font-family: 'Paperlogy', -apple-system, BlinkMacSystemFont, sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  background-color: var(--theme-bg-page) !important;
  color: #1F2937;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, border-color 0.3s ease;
}

.dark body {
  color: #F3F4F6;
}

/* Card & Box styling with variables */
.theme-card {
  background-color: var(--theme-bg-card) !important;
  border-color: var(--theme-border) !important;
}

.theme-accent-text {
  color: var(--theme-accent) !important;
}

.theme-accent-sub-bg {
  background-color: var(--theme-accent-sub) !important;
}

.theme-badge {
  background-color: var(--theme-badge-bg) !important;
  color: var(--theme-badge-text) !important;
}

/* Preset Button */
.preset-btn {
  border-color: var(--theme-border);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.preset-btn:hover {
  border-color: var(--theme-accent);
  transform: translateY(-2px);
}

.preset-btn.active {
  background: var(--theme-accent-gradient) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px 0 var(--theme-shadow);
  transform: scale(1.03);
}

.preset-btn.active .preset-desc {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Main Action Button */
.theme-main-btn {
  background: var(--theme-accent-gradient) !important;
  box-shadow: 0 8px 25px var(--theme-shadow) !important;
}

.theme-main-btn:hover {
  box-shadow: 0 12px 30px var(--theme-shadow) !important;
}

/* Minimal Color Dot Swatches (No text) */
.palette-chip {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  cursor: pointer;
  outline: none;
  display: inline-block;
}

.palette-chip:hover {
  transform: scale(1.25);
}

.palette-chip.active {
  transform: scale(1.25);
  border-color: #FFFFFF;
  box-shadow: 0 0 0 2px var(--theme-bg-card, #FFF), 0 0 0 3.5px var(--theme-accent, #785238);
}

/* Top Back Navigation Button (< Icon with Theme Adaptive Hover) */
.back-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  color: var(--theme-accent);
  background-color: transparent;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
}

.back-nav-btn:hover {
  background-color: var(--theme-accent-sub) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-accent) !important;
  box-shadow: 0 4px 12px var(--theme-shadow);
  transform: scale(1.05);
}

.back-nav-btn:hover iconify-icon {
  transform: translateX(-2px);
}

/* Hover & Transitions */
.smooth-transition {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-effect {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-effect:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   Custom Interactive Floating Tooltip
   ========================================================================== */
#custom-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 5px 10px;
  font-family: 'Paperlogy', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-radius: 8px;
  background-color: rgba(24, 24, 27, 0.94);
  color: #FFFFFF;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.dark #custom-tooltip {
  background-color: rgba(250, 250, 250, 0.95);
  color: #18181B;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

#custom-tooltip.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}