/* ==========================================================================
   1970s theme. Warm, sunbaked, earthy. Cream paper, burnt orange, avocado.

   This file only repaints. It never changes a size, a spacing or a target
   area, so the senior-friendly layout in base.css stays intact.
   ========================================================================== */

:root {
  --bg: #f7edda;
  --bg-fade: rgba(247, 237, 218, 0);
  /* Sunburst behind the top of the page, the way a 1970s album sleeve did it */
  --bg-accent-1: radial-gradient(
    120% 55% at 50% -8%,
    #f6c667 0%,
    #f0a94b 32%,
    rgba(247, 237, 218, 0) 72%
  );
  --bg-accent-2: none;

  --card: #fffaf0;
  --card-border: #cbb08a;
  --card-shadow: 0 3px 0 rgba(122, 76, 27, .16), 0 12px 26px rgba(122, 76, 27, .12);

  --ink: #2c1d10;
  --ink-soft: #5a4229;
  --ink-faint: #7a6144;

  --accent: #a4410f;
  --accent-ink: #fffaf0;
  --accent-soft: #f6e2c8;

  --option-bg: #fffaf0;
  --option-border: #b98b4e;
  --option-ink: #2c1d10;
  --option-badge-bg: #efdcbc;
  --option-badge-ink: #5a4229;

  --correct: #4a6216; /* avocado, but dark enough to read */
  --correct-bg: #eaf0d5;
  --correct-border: #4a6216;
  --wrong: #9c2b12;
  --wrong-bg: #f9e3da;
  --wrong-border: #9c2b12;

  --track: #e0cba6;

  /* Soft, rounded, friendly. Very much the decade. */
  --radius: 26px;
  --radius-sm: 18px;

  --display-weight: 800;
  --display-spacing: -0.02em;
  --display-transform: none;
  --display-shadow: none;
}

/* A quiet stripe under the title, echoing seventies rainbow banding. */
.title::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 10px;
  margin-top: .75rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #a4410f 0 25%,
    #d9822b 25% 50%,
    #e0b040 50% 75%,
    #6d8a24 75% 100%
  );
}