:root {
  /* Backgrounds — soft, muted pastels */
  --clay-bg: #f0e6db;
  --clay-bg-card: #e8ddd4;
  --clay-bg-button: #d4c4b0;
  --clay-accent: #c4a882;

  /* Radius — large, rounded, puffy */
  --clay-radius: 20px;
  --clay-radius-lg: 32px;
  --clay-radius-pill: 50px;

  /* Shadows — dual inner + offset outer */
  --clay-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.12),
    inset -4px -4px 8px rgba(0, 0, 0, 0.08),
    inset 4px 4px 8px rgba(255, 255, 255, 0.6);
  --clay-shadow-elevated:
    12px 12px 24px rgba(0, 0, 0, 0.15),
    inset -6px -6px 12px rgba(0, 0, 0, 0.1),
    inset 6px 6px 12px rgba(255, 255, 255, 0.7);
  --clay-shadow-pressed:
    2px 2px 6px rgba(0, 0, 0, 0.1),
    inset -6px -6px 12px rgba(0, 0, 0, 0.12),
    inset 6px 6px 12px rgba(255, 255, 255, 0.5);

  /* Text */
  --clay-text: #4a3f35;
  --clay-text-muted: #8a7e72;
}

/* Dark mode */
[data-theme="dark"] {
  --clay-bg: #2a2520;
  --clay-bg-card: #352f28;
  --clay-bg-button: #443c33;
  --clay-accent: #6b5d4f;
  --clay-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.35),
    inset -4px -4px 8px rgba(0, 0, 0, 0.25),
    inset 4px 4px 8px rgba(255, 255, 255, 0.05);
  --clay-shadow-elevated:
    12px 12px 24px rgba(0, 0, 0, 0.4),
    inset -6px -6px 12px rgba(0, 0, 0, 0.3),
    inset 6px 6px 12px rgba(255, 255, 255, 0.06);
  --clay-shadow-pressed:
    2px 2px 6px rgba(0, 0, 0, 0.3),
    inset -6px -6px 12px rgba(0, 0, 0, 0.35),
    inset 6px 6px 12px rgba(255, 255, 255, 0.04);
  --clay-text: #d4c8bc;
  --clay-text-muted: #8a7e72;
}