:root,
body.light {
  --primary: #006e1c;
  --on-primary: #ffffff;
  --primary-container: #94f990;
  --on-primary-container: #002204;
  --secondary: #52634f;
  --on-secondary: #ffffff;
  --secondary-container: #d5e8cf;
  --on-secondary-container: #111f0f;
  --tertiary: #38656a;
  --on-tertiary: #ffffff;
  --tertiary-container: #bcebf0;
  --on-tertiary-container: #002023;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fcfdf6;
  --on-background: #1a1c19;
  --surface: #f9faf4;
  --on-surface: #1a1c19;
  --surface-variant: #dee5d8;
  --on-surface-variant: #424940;
  --outline: #72796f;
  --outline-variant: #c2c9bd;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #2f312d;
  --inverse-on-surface: #f0f1eb;
  --inverse-primary: #78dc77;
  --surface-dim: #dadad4;
  --surface-bright: #f9faf4;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f4ee;
  --surface-container: #eeeee8;
  --surface-container-high: #e8e9e2;
  --surface-container-highest: #e2e3dd;
}

body.dark {
  --primary: #78dc77;
  --on-primary: #00390a;
  --primary-container: #005313;
  --on-primary-container: #94f990;
  --secondary: #baccb3;
  --on-secondary: #253423;
  --secondary-container: #3b4b38;
  --on-secondary-container: #d5e8cf;
  --tertiary: #a0cfd4;
  --on-tertiary: #00363b;
  --tertiary-container: #1f4d52;
  --on-tertiary-container: #bcebf0;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: #1a1c19;
  --on-background: #e2e3dd;
  --surface: #121411;
  --on-surface: #e2e3dd;
  --surface-variant: #424940;
  --on-surface-variant: #c2c9bd;
  --outline: #8c9388;
  --outline-variant: #424940;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e2e3dd;
  --inverse-on-surface: #2f312d;
  --inverse-primary: #006e1c;
  --surface-dim: #121411;
  --surface-bright: #383a36;
  --surface-container-lowest: #0c0f0c;
  --surface-container-low: #1a1c19;
  --surface-container: #1e201d;
  --surface-container-high: #282b27;
  --surface-container-highest: #333531;
}

body {
  font-family: var(--font-family);
}

.closet-card__delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error);
  color: var(--on-error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.closet-card__delete:hover {
  background: var(--error-container);
  color: var(--error);
}

.closet-items-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .closet-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

.closet-item-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 18px;
  min-height: 120px;
  position: relative;
  background: var(--surface-container);
}

.closet-card__image {
  width: 75px;
  height: 75px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.upload-form {
  position: relative;
}

.upload-overlay {
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  border-radius: 24px;
  z-index: 1000;
  color: var(--on-primary);
  text-align: center;
}

.upload-overlay__content {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  width: min(320px, 90%);
}

.upload-overlay__text {
  font-weight: 600;
  font-size: 1rem;
}

.upload-form .upload-overlay {
  display: none;
}

.upload-form.htmx-request .upload-overlay {
  display: flex;
}

.recommend-dialog {
  width: min(520px, 90vw);
  border-radius: 28px;
  padding: 1.5rem;
}

.recommend-grid {
  justify-content: center;
}

.recommend-card {
  width: 140px;
  height: 140px;
  border-radius: 18px;
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.recommend-card img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.recommend-card--empty {
  color: var(--on-surface-variant);
  font-size: 0.9rem;
  justify-content: center;
  text-align: center;
}

.recommend-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
}

.recommend-kind {
  min-width: 0;
}

.recommend-kind .caption {
  color: var(--on-surface-variant);
}

.lock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-container-low);
}