@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2ecbc;
    --surface: #e5ddb0;
    --border: #c8c093;

    --text: #545464;
    --text-soft: #43436c;
    --text-muted: #77713f;

    --primary: #2f5d95;
    --accent: #4e8ca2;
    --warm: #cc6d00;
    --danger: #c84053;
    --glow-blue: rgba(47, 93, 149, 0.14);
    --glow-gold: rgba(204, 109, 0, 0.13);
    --glow-mint: rgba(78, 140, 162, 0.12);
    --glow-purple: rgba(118, 107, 144, 0.14);
    --glow-red: rgba(200, 64, 83, 0.13);
    --glow-cyan: rgba(58, 143, 183, 0.12);
    --glow-green: rgba(111, 137, 78, 0.13);
    --glow-pink: rgba(179, 91, 121, 0.12);
    --glow-teal: rgba(90, 119, 133, 0.12);
    --glow-lime: rgba(119, 113, 63, 0.12);
    --glow-rose: rgba(215, 71, 75, 0.13);
  }

  body {
    color-scheme: light;
  }

  .tone-purple {
    --card-accent: #766b90;
  }

  .tone-cyan {
    --card-accent: #3a8fb7;
  }

  .tone-green {
    --card-accent: #6f894e;
  }

  .tone-pink {
    --card-accent: #b35b79;
  }

  .tone-teal {
    --card-accent: #5a7785;
  }

  .tone-lime {
    --card-accent: #77713f;
  }

  .tone-rose {
    --card-accent: #d7474b;
  }

  .stack-card,
  .project-card,
  .workstation-card {
    background:
      linear-gradient(135deg, var(--card-glow), transparent 46%),
      linear-gradient(180deg, rgba(247, 241, 197, 0.52), transparent),
      var(--surface);
    box-shadow: 0 16px 36px rgba(67, 67, 108, 0.1);
  }

  .stack-card:hover,
  .project-card:hover,
  .workstation-card:hover {
    box-shadow: 0 22px 48px rgba(67, 67, 108, 0.14);
  }

  .stack-card__badge,
  .stack-card__footer span,
  .project-card__status,
  .project-card__stack span,
  .workstation-card__status,
  .workstation-card__specs dt,
  .workstation-card__chips span,
  .link-card {
    background-color: rgba(242, 236, 188, 0.58);
    border-color: color-mix(in srgb, var(--card-accent) 28%, var(--border));
  }
  .workstation-card__status--actual {
    background-color: var(--card-accent);
    color: var(--surface);
  }
  .workstation-card__status--archive {
    background-color: rgba(31, 31, 40, 0.52);
    color: var(--surface);
    font-style: italic;
  }

  .link-card:hover {
    background-color: color-mix(in srgb, var(--card-glow) 46%, var(--surface));
  }

  .site-pill,
  .site-nav a,
  .stack-toggle,
  .workstation-toggle {
    background-color: rgba(242, 236, 188, 0.42);
  }
}