:root {
  --bg: #171a1b;
  --bg-soft: #202426;
  --surface: rgba(33, 37, 38, .88);
  --surface-solid: #242829;
  --surface-2: rgba(49, 54, 55, .88);
  --surface-border: rgba(198, 151, 98, .52);
  --text: #f4f1ec;
  --text-dim: #c8c3bb;
  --text-faint: #969b9b;
  --accent: #0d8190;
  --accent-ink: #fff;
  --accent-soft: rgba(13, 129, 144, .18);
  --accent-deep: #075564;
  --gold: #c69762;
  --gold-soft: rgba(198, 151, 98, .16);
}

html, body, #root {
  background: #171a1b;
}

body {
  color: var(--text);
  background-image:
    radial-gradient(ellipse at 96% 7%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.045) 13%, transparent 30%),
    radial-gradient(ellipse at -9% 35%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 16%, transparent 35%),
    radial-gradient(ellipse at 88% 70%, rgba(255,255,255,.07) 0%, transparent 26%),
    radial-gradient(circle at 92% 5%, rgba(13, 129, 144, .14), transparent 25%),
    radial-gradient(circle at 8% 32%, rgba(198, 151, 98, .09), transparent 30%),
    linear-gradient(117deg, transparent 0 19%, rgba(255,255,255,.07) 21%, rgba(255,255,255,.018) 27%, transparent 34%),
    linear-gradient(151deg, transparent 0 54%, rgba(255,255,255,.035) 58%, transparent 66%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.014) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #2b2e2f 0%, #1b1f20 46%, #121515 100%);
}

.app {
  background:
    radial-gradient(ellipse at 83% 8%, rgba(255,255,255,.075), transparent 24%),
    radial-gradient(ellipse at 12% 58%, rgba(255,255,255,.055), transparent 28%),
    radial-gradient(circle at 50% -8%, rgba(83, 91, 91, .25), transparent 35%),
    linear-gradient(128deg, transparent 0 31%, rgba(255,255,255,.035) 35%, transparent 43%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 45%);
}

.screen-title,
.today-screen__title,
.section-heading__title,
.wardrobe-section__title {
  color: var(--text);
}

.today-screen__date {
  width: fit-content;
  color: #eee8df;
  background: rgba(28, 31, 32, .78);
  border: 1px solid rgba(198, 151, 98, .66);
  border-radius: 999px;
  padding: 8px 13px;
  box-shadow: 0 9px 24px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.08);
}

.today-screen__date:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(198,151,98,.12);
}

.mannequin-card {
  background:
    linear-gradient(rgba(8,10,10,.06), rgba(8,10,10,.18)),
    url("/assets/closet-wall-urban-v2.webp") center / cover no-repeat;
  border: 1px solid rgba(198, 151, 98, .68);
  box-shadow: 0 24px 58px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.1);
}

.mannequin-card:after {
  color: #fff;
  background: rgba(15,17,17,.72);
  border-color: rgba(198,151,98,.48);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

.mannequin-card .realistic-mannequin {
  background: #202323;
  box-shadow: 0 16px 36px rgba(0,0,0,.46);
}

.slot-button,
.summary-list__row,
.piece-row,
.wardrobe-item,
.day-card,
.calendar,
.week-summary,
.backup-section,
.empty-hint,
.piece-preview {
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(50,54,55,.92), rgba(26,29,30,.93));
  border-color: rgba(198,151,98,.5);
  box-shadow: 0 12px 28px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.07);
}

.slot-button.is-filled,
.piece-row.is-selected {
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(18,93,103,.38), rgba(27,31,32,.94));
  border-color: rgba(26,172,188,.7);
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 3px 0 #18a1b1, inset 0 1px rgba(255,255,255,.07);
}

.slot-button__icon,
.day-card__date {
  color: #30b3c1;
  background: linear-gradient(145deg, rgba(13,129,144,.3), rgba(255,255,255,.035));
  border-color: rgba(42,173,187,.34);
}

.slot-button__label,
.piece-row__alert,
.wardrobe-item__tipo,
.day-card__items,
.backup-section__hint,
.screen-hero__copy {
  color: var(--text-faint);
}

.summary-list__row .icon,
.piece-row__check {
  color: #2bb0bf;
}

.btn {
  border-radius: 16px;
}

.btn--outline,
.btn--ghost {
  color: var(--text);
  background: linear-gradient(145deg, rgba(48,52,53,.8), rgba(26,29,30,.9));
  border-color: rgba(198,151,98,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.06);
}

.btn--primary {
  color: #fff;
  background: linear-gradient(145deg, #0d8190, #07515e);
  border-color: rgba(55,190,204,.58);
  box-shadow: 0 12px 28px rgba(0,54,63,.38), inset 0 1px rgba(255,255,255,.18);
}

.screen-hero {
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(198,151,98,.22), transparent 27%),
    linear-gradient(138deg, #35393a 0%, #232728 58%, #171a1b 100%);
  border-color: rgba(198,151,98,.58);
  box-shadow: 0 20px 45px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.09);
}

.screen-hero:before {
  border-color: rgba(198,151,98,.35);
  box-shadow: 0 0 0 17px rgba(255,255,255,.025), 0 0 0 35px rgba(198,151,98,.045);
}

.screen-hero__eyebrow,
.section-heading__eyebrow,
.day-card__weekday {
  color: #d0a574;
}

.screen-hero__metric,
.section-heading__count {
  color: #ece6dd;
  background: rgba(255,255,255,.055);
  border-color: rgba(198,151,98,.32);
}

.calendar__header {
  border-bottom-color: rgba(198,151,98,.17);
}

.calendar__title {
  color: #f2eee8;
}

.calendar__nav,
.calendar__day.has-record {
  color: #d8d5cf;
  background: rgba(255,255,255,.07);
  border-color: rgba(198,151,98,.2);
}

.calendar__day {
  color: #b8b6b0;
}

.calendar__day.is-today {
  color: #fff;
  background: linear-gradient(145deg, #0e8a99, #07515e);
  box-shadow: 0 7px 16px rgba(0,74,84,.48);
}

.chip {
  color: #d8d5cf;
  background: rgba(45,49,50,.9);
  border-color: rgba(198,151,98,.3);
}

.chip.is-selected {
  color: #fff;
  background: linear-gradient(145deg, #0d8190, #07515e);
  border-color: rgba(47,182,196,.65);
}

.wardrobe-item:before {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.sheet {
  color: var(--text);
  background:
    radial-gradient(circle at 90% 0, rgba(13,129,144,.15), transparent 27%),
    linear-gradient(160deg, #303435, #181b1c);
  border-color: rgba(198,151,98,.45);
  box-shadow: 0 -24px 65px rgba(0,0,0,.58);
}

.sheet__title {
  color: #f3efe9;
}

.sheet__close,
.input,
.color-option {
  color: var(--text);
  background: rgba(255,255,255,.055);
  border-color: rgba(198,151,98,.28);
}

.input::placeholder {
  color: #848989;
}

.piece-row__swatch,
.color-option__swatch {
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.bottom-nav {
  color: var(--text-dim);
  background: rgba(27,30,31,.9);
  border-color: rgba(198,151,98,.45);
  box-shadow: 0 14px 38px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.07);
}

.bottom-nav__item {
  color: #9da2a2;
}

.bottom-nav__item.is-active {
  color: #fff;
  background: linear-gradient(145deg, #0d8190, #064852);
  box-shadow: 0 10px 23px rgba(0,66,76,.5), inset 0 1px rgba(255,255,255,.18);
}

.weekly-looks {
  background:
    radial-gradient(circle at 50% 8%, rgba(13,129,144,.18), transparent 32%),
    linear-gradient(155deg, #282c2d, #0f1212);
}

.weekly-look {
  background: #171a1b;
  border-color: rgba(198,151,98,.46);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

.weekly-look__date {
  background: rgba(16,18,18,.8);
  border-color: rgba(198,151,98,.43);
}

.weekly-looks-button {
  background: linear-gradient(135deg, #3a3f40, #1d2021);
  border-color: rgba(198,151,98,.5);
  box-shadow: 0 13px 30px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.08);
}

.alert,
.yesterday-banner,
.toast {
  color: #e7e2da;
  background: rgba(38,43,43,.94);
  border-color: rgba(198,151,98,.35);
  box-shadow: 0 13px 30px rgba(0,0,0,.32);
}

@media (width >= 600px) and (width <= 900px) {
  .screen {
    padding-inline: clamp(28px, 4vw, 48px);
  }
}