/* ==========================================================================
   Neumorphic Design System & Token Architecture
   ========================================================================== */

:root {
  /* Color Scheme & Canvas Ratios */
  color-scheme: light dark;
  
  /* Light Mode (Default) - 60/30/10 Rule */
  --bg-color: #e0e8f6;          /* 60% Background Canvas */
  --surface-color: #e0e8f6;     /* 30% Soft Structural Surface */
  --text-color: #2c3e50;
  --text-muted: #7f8c8d;
  
  /* Neumorphic Shadows (Tactile Shadows) */
  --nm-extruded: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.85);
  --nm-extruded-sm: 4px 4px 8px rgba(163, 177, 198, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.8);
  --nm-inset: inset 4px 4px 8px rgba(163, 177, 198, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.85);
  --nm-inset-sm: inset 2px 2px 4px rgba(163, 177, 198, 0.5), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
  
  /* 10% Accent Gradient: Electric Blue to Cyan */
  --accent-gradient: linear-gradient(135deg, #0072ff, #00f2fe);
  --accent-color: #0072ff;
  --accent-glow: 0 0 15px rgba(0, 114, 255, 0.4);

  /* Animation Settings */
  --transition-speed: 0.25s;
  --skeleton-shine: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}

/* Dark Mode Theme Definition */
[data-theme="dark"] {
  --bg-color: #0e1218;          /* 60% Background Canvas */
  --surface-color: #161d26;     /* 30% Soft Structural Surface */
  --text-color: #ecf0f1;
  --text-muted: #95a5a6;
  
  /* Neumorphic Shadows (Tactile Shadows for Dark Mode) */
  --nm-extruded: 9px 9px 18px rgba(5, 7, 10, 0.75), -9px -9px 18px rgba(34, 45, 59, 0.9);
  --nm-extruded-sm: 4px 4px 8px rgba(5, 7, 10, 0.7), -4px -4px 8px rgba(34, 45, 59, 0.8);
  --nm-inset: inset 4px 4px 8px rgba(5, 7, 10, 0.75), inset -4px -4px 8px rgba(34, 45, 59, 0.9);
  --nm-inset-sm: inset 2px 2px 4px rgba(5, 7, 10, 0.7), inset -2px -2px 4px rgba(34, 45, 59, 0.8);

  --skeleton-shine: linear-gradient(90deg, rgba(22, 29, 38, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(22, 29, 38, 0) 100%);
}

/* Base Body Styling Reset */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Poppins', sans-serif;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Tactile & Neumorphic Classes
   ========================================================================== */

/* 1. Soft Extruded Card Structures */
.nm-card {
  background: var(--surface-color);
  border-radius: 16px;
  box-shadow: var(--nm-extruded);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

/* 2. Deep Recessed Tracks (Inset elements: inputs, sliders, track components) */
.nm-inset {
  background: var(--surface-color);
  border-radius: 12px;
  box-shadow: var(--nm-inset);
  border: none;
  padding: 12px 16px;
  color: var(--text-color);
  outline: none;
  transition: box-shadow var(--transition-speed) ease;
}
.nm-inset:focus {
  box-shadow: var(--nm-inset), 0 0 0 2px rgba(0, 114, 255, 0.2);
}

/* 3. Tactile Buttons (Extruded naturally, depress on click) */
.nm-btn {
  background: var(--surface-color);
  color: var(--text-color);
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--nm-extruded-sm);
  transition: all var(--transition-speed) ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.nm-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--nm-extruded);
}
.nm-btn:active,
.nm-btn.active {
  transform: translateY(0);
  box-shadow: var(--nm-inset-sm);
}

/* 4. Gradient Accent Control Buttons (10% Neon Accent Color Rule) */
.nm-btn-primary {
  background: var(--accent-gradient);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--nm-extruded-sm), var(--accent-glow);
  transition: all var(--transition-speed) ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.nm-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: var(--nm-extruded), var(--accent-glow);
}
.nm-btn-primary:active {
  transform: translateY(0);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Glowing Skeleton Loader Network
   ========================================================================== */

.skeleton-loader {
  background: var(--surface-color);
  box-shadow: var(--nm-inset);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.skeleton-loader::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: var(--skeleton-shine);
  animation: shimmer 1.6s infinite ease-in-out;
}

.skeleton-text {
  height: 16px;
  width: 100%;
  margin-bottom: 12px;
  border-radius: 4px;
}
.skeleton-text.short {
  width: 60%;
}
.skeleton-text.medium {
  width: 80%;
}

.skeleton-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}