/* ==========================================================================
   2000s theme. Early web: cool light grey, electric blue, a lime accent and
   the glossy highlight that was on every button of that decade.

   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: #eef2f8;
  --bg-fade: rgba(238, 242, 248, 0);
  --bg-accent-1: radial-gradient(
    110% 45% at 50% -6%,
    rgba(31, 95, 208, .28) 0%,
    rgba(126, 211, 33, .1) 45%,
    rgba(238, 242, 248, 0) 78%
  );
  /* A faint brushed-metal sheen, the other half of the look. */
  --bg-accent-2: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .5) 0 2px,
    rgba(210, 219, 232, .3) 2px 4px
  );

  --card: #ffffff;
  --card-border: #c3cede;
  --card-shadow: 0 2px 0 rgba(18, 32, 58, .06), 0 12px 28px rgba(18, 32, 58, .12);

  --ink: #12203a;
  --ink-soft: #3b4a66;
  --ink-faint: #5e6c85;

  --accent: #1a56c4;
  --accent-ink: #ffffff;
  --accent-soft: #dde7fa;

  --option-bg: #ffffff;
  --option-border: #93a6c4;
  --option-ink: #12203a;
  --option-badge-bg: #dde7fa;
  --option-badge-ink: #14295c;

  --correct: #14672f;
  --correct-bg: #e3f2e8;
  --correct-border: #14672f;
  --wrong: #a3221b;
  --wrong-bg: #fbe7e5;
  --wrong-border: #a3221b;

  --track: #ccd7e8;

  --radius: 14px;
  --radius-sm: 10px;

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

body {
  background-size: auto, 6px 6px;
}

/* The glossy top highlight that every button had in 2004. Sits on top of the
   accent colour, so the contrast measured on the text underneath is unchanged. */
.btn {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, .3) 0%,
    rgba(255, 255, 255, .06) 48%,
    rgba(0, 0, 0, .06) 100%
  );
}

.btn-plain,
.btn-quiet {
  background-image: none;
}

/* Same gloss on the answer buttons, kept very light so the text stays crisp. */
.option {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, .9) 0%,
    rgba(233, 239, 249, .9) 100%
  );
}