/**
 * NOCODEWORKS Neumorphism Styles
 *
 * Soft UI elements with inner/outer shadows for depth.
 * Adapts to each color palette for consistent theming.
 */

/* ============================================
   Neumorphism Variables per Palette
   ============================================ */

/* Aizome (藍染) - Default */
:root,
[data-palette="aizome"] {
  --neu-bg: #f5f5f0;
  --neu-shadow-dark: rgba(30, 58, 95, 0.2);
  --neu-shadow-light: rgba(255, 255, 255, 0.9);
  --neu-shadow-inset-dark: rgba(30, 58, 95, 0.15);
  --neu-shadow-inset-light: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"][data-palette="aizome"],
[data-theme="dark"]:root {
  --neu-bg: #1e3a5f;
  --neu-shadow-dark: rgba(0, 0, 0, 0.4);
  --neu-shadow-light: rgba(107, 154, 196, 0.1);
  --neu-shadow-inset-dark: rgba(0, 0, 0, 0.3);
  --neu-shadow-inset-light: rgba(107, 154, 196, 0.08);
}

/* Washi (和紙) */
[data-palette="washi"] {
  --neu-bg: #ffffff;
  --neu-shadow-dark: rgba(26, 22, 18, 0.15);
  --neu-shadow-light: rgba(255, 255, 255, 1);
  --neu-shadow-inset-dark: rgba(26, 22, 18, 0.1);
  --neu-shadow-inset-light: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"][data-palette="washi"] {
  --neu-bg: #1a1612;
  --neu-shadow-dark: rgba(0, 0, 0, 0.5);
  --neu-shadow-light: rgba(200, 195, 188, 0.1);
  --neu-shadow-inset-dark: rgba(0, 0, 0, 0.4);
  --neu-shadow-inset-light: rgba(200, 195, 188, 0.08);
}

/* Sakura (桜) */
[data-palette="sakura"] {
  --neu-bg: #fdf6f8;
  --neu-shadow-dark: rgba(212, 114, 156, 0.2);
  --neu-shadow-light: rgba(255, 255, 255, 0.9);
  --neu-shadow-inset-dark: rgba(212, 114, 156, 0.15);
  --neu-shadow-inset-light: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"][data-palette="sakura"] {
  --neu-bg: #1f1a1c;
  --neu-shadow-dark: rgba(0, 0, 0, 0.4);
  --neu-shadow-light: rgba(232, 164, 190, 0.1);
  --neu-shadow-inset-dark: rgba(0, 0, 0, 0.3);
  --neu-shadow-inset-light: rgba(232, 164, 190, 0.08);
}

/* Matcha (抹茶) */
[data-palette="matcha"] {
  --neu-bg: #f5f7f4;
  --neu-shadow-dark: rgba(74, 124, 78, 0.2);
  --neu-shadow-light: rgba(255, 255, 255, 0.9);
  --neu-shadow-inset-dark: rgba(74, 124, 78, 0.15);
  --neu-shadow-inset-light: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"][data-palette="matcha"] {
  --neu-bg: #141a14;
  --neu-shadow-dark: rgba(0, 0, 0, 0.4);
  --neu-shadow-light: rgba(125, 181, 127, 0.1);
  --neu-shadow-inset-dark: rgba(0, 0, 0, 0.3);
  --neu-shadow-inset-light: rgba(125, 181, 127, 0.08);
}

/* Tsuki (月) */
[data-palette="tsuki"] {
  --neu-bg: #f7f5fa;
  --neu-shadow-dark: rgba(124, 92, 191, 0.2);
  --neu-shadow-light: rgba(255, 255, 255, 0.9);
  --neu-shadow-inset-dark: rgba(124, 92, 191, 0.15);
  --neu-shadow-inset-light: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"][data-palette="tsuki"] {
  --neu-bg: #15121e;
  --neu-shadow-dark: rgba(0, 0, 0, 0.4);
  --neu-shadow-light: rgba(163, 143, 212, 0.1);
  --neu-shadow-inset-dark: rgba(0, 0, 0, 0.3);
  --neu-shadow-inset-light: rgba(163, 143, 212, 0.08);
}

/* ============================================
   Neumorphism Component Classes
   ============================================ */

/* Base neumorphic element */
.neu {
  background: var(--neu-bg);
  border-radius: var(--radius-md);
  box-shadow:
    8px 8px 16px var(--neu-shadow-dark),
    -8px -8px 16px var(--neu-shadow-light);
  transition: all var(--transition-base) var(--ease-out);
}

.neu:hover {
  box-shadow:
    4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
}

.neu:active {
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-inset-dark),
    inset -4px -4px 8px var(--neu-shadow-inset-light);
}

/* Neumorphic button */
.neu-button {
  background: var(--neu-bg);
  border: none;
  border-radius: var(--radius-md);
  box-shadow:
    8px 8px 16px var(--neu-shadow-dark),
    -8px -8px 16px var(--neu-shadow-light);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out);
  color: var(--nw-palette-text);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
}

.neu-button:hover {
  box-shadow:
    4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
  transform: translateY(-1px);
}

.neu-button:active {
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-inset-dark),
    inset -4px -4px 8px var(--neu-shadow-inset-light);
  transform: translateY(0);
}

/* Neumorphic input/form elements */
.neu-input {
  background: var(--neu-bg);
  border: none;
  border-radius: var(--radius-md);
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-inset-dark),
    inset -4px -4px 8px var(--neu-shadow-inset-light);
  padding: var(--space-sm) var(--space-md);
  color: var(--nw-palette-text);
  font-size: var(--text-base);
  transition: all var(--transition-fast) var(--ease-out);
}

.neu-input:focus {
  outline: none;
  box-shadow:
    inset 6px 6px 12px var(--neu-shadow-inset-dark),
    inset -6px -6px 12px var(--neu-shadow-inset-light);
}

.neu-input::placeholder {
  color: var(--nw-palette-text-muted);
}

/* Neumorphic card */
.neu-card {
  background: var(--neu-bg);
  border-radius: var(--radius-lg);
  box-shadow:
    12px 12px 24px var(--neu-shadow-dark),
    -12px -12px 24px var(--neu-shadow-light);
  padding: var(--space-lg);
  transition: all var(--transition-base) var(--ease-out);
}

.neu-card:hover {
  box-shadow:
    8px 8px 16px var(--neu-shadow-dark),
    -8px -8px 16px var(--neu-shadow-light);
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .neu-card {
    padding: var(--space-xl);
  }
}

/* Neumorphic panel (flat) */
.neu-panel {
  background: var(--neu-bg);
  border-radius: var(--radius-md);
  box-shadow:
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
  padding: var(--space-md);
}

/* Neumorphic pressed state (inset) */
.neu-inset {
  background: var(--neu-bg);
  border-radius: var(--radius-md);
  box-shadow:
    inset 6px 6px 12px var(--neu-shadow-inset-dark),
    inset -6px -6px 12px var(--neu-shadow-inset-light);
  padding: var(--space-md);
}

/* Neumorphic icon button (circular) */
.neu-icon-button {
  background: var(--neu-bg);
  border: none;
  border-radius: var(--radius-full);
  box-shadow:
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out);
}

.neu-icon-button:hover {
  box-shadow:
    3px 3px 6px var(--neu-shadow-dark),
    -3px -3px 6px var(--neu-shadow-light);
}

.neu-icon-button:active {
  box-shadow:
    inset 3px 3px 6px var(--neu-shadow-inset-dark),
    inset -3px -3px 6px var(--neu-shadow-inset-light);
}

/* ============================================
   Button Size Variants
   ============================================ */

.neu-button-sm {
  padding: calc(var(--space-xs) + 2px) var(--space-md);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  box-shadow:
    4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
}

.neu-button-sm:hover {
  box-shadow:
    2px 2px 4px var(--neu-shadow-dark),
    -2px -2px 4px var(--neu-shadow-light);
}

.neu-button-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
  box-shadow:
    12px 12px 24px var(--neu-shadow-dark),
    -12px -12px 24px var(--neu-shadow-light);
}

.neu-button-lg:hover {
  box-shadow:
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light);
}

/* ============================================
   Accessibility & Responsive
   ============================================ */

@media (max-width: 767px) {
  /* Reduce shadow intensity on mobile */
  .neu,
  .neu-button,
  .neu-card {
    box-shadow:
      6px 6px 12px var(--neu-shadow-dark),
      -6px -6px 12px var(--neu-shadow-light);
  }

  .neu-card {
    padding: var(--space-md);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .neu,
  .neu-button,
  .neu-card,
  .neu-input,
  .neu-icon-button {
    transition: none;
  }

  .neu:hover,
  .neu-button:hover,
  .neu-card:hover {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .neu-button,
  .neu-input {
    border: 2px solid var(--nw-palette-text);
  }
}