/* Claymorphism design tokens — light + dark mode */

:root {
  /* backgrounds */
  --clay-bg-page: #f0f2f5;
  --clay-bg: #f7f9fc;
  --clay-bg-card: #ffffff;
  --clay-bg-button: #ffffff;

  /* text */
  --clay-text: #2d3748;
  --clay-text-muted: #5a6578;

  /* accents / semantic */
  --clay-accent: #b46a46;
  --clay-accent-strong: #b45309;
  --clay-danger: #b84c4c;
  --clay-danger-text: #c53030;
  --clay-success: #4d8f5a;
  --clay-success-text: #2f855a;
  --clay-warning: #d69e2e;

  /* radii */
  --clay-radius-sm: 14px;
  --clay-radius: 24px;
  --clay-radius-lg: 32px;
  --clay-radius-pill: 999px;

  /* shadows: dual inner highlight/shade + offset outer shadow */
  --clay-shadow:
    inset 6px 6px 12px rgba(255, 255, 255, 0.6),
    inset -6px -6px 12px rgba(163, 177, 198, 0.35),
    8px 8px 16px rgba(163, 177, 198, 0.3);

  --clay-shadow-elevated:
    inset 6px 6px 12px rgba(255, 255, 255, 0.7),
    inset -6px -6px 12px rgba(163, 177, 198, 0.3),
    12px 12px 24px rgba(163, 177, 198, 0.35);

  --clay-shadow-pressed:
    inset 4px 4px 8px rgba(163, 177, 198, 0.35),
    inset -4px -4px 8px rgba(255, 255, 255, 0.5);

  --clay-shadow-sm:
    inset 3px 3px 6px rgba(255, 255, 255, 0.5),
    inset -3px -3px 6px rgba(163, 177, 198, 0.25),
    4px 4px 8px rgba(163, 177, 198, 0.2);

  --clay-transition: box-shadow 0.2s ease, transform 0.1s ease;
}

/* manual dark mode */
.clay-theme-dark {
  --clay-bg-page: #1a1d23;
  --clay-bg: #252a33;
  --clay-bg-card: #2d3340;
  --clay-bg-button: #2d3340;

  --clay-text: #e2e8f0;
  --clay-text-muted: #a0aec0;

  --clay-accent: #b46a46;
  --clay-accent-strong: #b45309;
  --clay-danger: #fc8181;
  --clay-danger-text: #feb2b2;
  --clay-success: #68d391;
  --clay-success-text: #9ae6b4;
  --clay-warning: #f6e05e;

  --clay-shadow:
    inset 4px 4px 8px rgba(255, 255, 255, 0.05),
    inset -4px -4px 8px rgba(0, 0, 0, 0.45),
    8px 8px 20px rgba(0, 0, 0, 0.5);

  --clay-shadow-elevated:
    inset 4px 4px 8px rgba(255, 255, 255, 0.06),
    inset -4px -4px 8px rgba(0, 0, 0, 0.4),
    12px 12px 28px rgba(0, 0, 0, 0.55);

  --clay-shadow-pressed:
    inset 3px 3px 6px rgba(0, 0, 0, 0.45),
    inset -3px -3px 6px rgba(255, 255, 255, 0.04);

  --clay-shadow-sm:
    inset 2px 2px 4px rgba(255, 255, 255, 0.04),
    inset -2px -2px 4px rgba(0, 0, 0, 0.35),
    4px 4px 10px rgba(0, 0, 0, 0.4);
}

/* automatic dark mode */
@media (prefers-color-scheme: dark) {
  .clay-theme-darkEnabled {
    --clay-bg-page: #1a1d23;
    --clay-bg: #252a33;
    --clay-bg-card: #2d3340;
    --clay-bg-button: #2d3340;

    --clay-text: #e2e8f0;
    --clay-text-muted: #a0aec0;

    --clay-accent: #b46a46;
    --clay-accent-strong: #b45309;
    --clay-danger: #fc8181;
    --clay-danger-text: #feb2b2;
    --clay-success: #4d8f5a;
    --clay-success-text: #9ae6b4;
    --clay-warning: #f6e05e;

    --clay-shadow:
      inset 4px 4px 8px rgba(255, 255, 255, 0.05),
      inset -4px -4px 8px rgba(0, 0, 0, 0.45),
      8px 8px 20px rgba(0, 0, 0, 0.5);

    --clay-shadow-elevated:
      inset 4px 4px 8px rgba(255, 255, 255, 0.06),
      inset -4px -4px 8px rgba(0, 0, 0, 0.4),
      12px 12px 28px rgba(0, 0, 0, 0.55);

    --clay-shadow-pressed:
      inset 3px 3px 6px rgba(0, 0, 0, 0.45),
      inset -3px -3px 6px rgba(255, 255, 255, 0.04);

    --clay-shadow-sm:
      inset 2px 2px 4px rgba(255, 255, 255, 0.04),
      inset -2px -2px 4px rgba(0, 0, 0, 0.35),
      4px 4px 10px rgba(0, 0, 0, 0.4);
  }
}