/* ==========================================================================
   Theme for the home page and the not-found page. Neutral and warm: it does
   not belong to any one decade, it just points at the three that do.
   ========================================================================== */

:root {
  --bg: #f6f2ea;
  --bg-fade: rgba(246, 242, 234, 0);
  --bg-accent-1: radial-gradient(
    110% 45% at 50% -6%,
    rgba(168, 74, 24, .22) 0%,
    rgba(246, 242, 234, 0) 72%
  );

  --card: #ffffff;
  --card-border: #d8cfc0;

  --ink: #1b1815;
  --ink-soft: #4a443c;
  --ink-faint: #6d665c;

  --accent: #96431a;
  --accent-ink: #ffffff;

  --option-border: #b3a897;

  --radius: 22px;
  --radius-sm: 14px;
}

/* Each card carries a stripe in its own decade colours, so the three are
   telling apart at a glance before you even read them. */
.picker-card {
  border-left-width: 14px;
}

.picker-card.is-60s {
  border-left-color: #b8332a;
}

.picker-card.is-70s {
  border-left-color: #d9822b;
}

.picker-card.is-80s {
  border-left-color: #ff2e88;
}

.picker-card.is-90s {
  border-left-color: #00776c;
}

.picker-card.is-2000s {
  border-left-color: #1a56c4;
}