[data-theme="sunset"] {
  /* Base palette is the light half; the dark pairing is only announced where
     light-dark() exists, in the @supports block below. */
  color-scheme: light;

  --primary: hsl(16 84% 43%);
  --primary-fg: white;
  --secondary: hsl(330 60% 52%);
  --secondary-fg: white;
  --success: hsl(142 52% 34%);
  --success-fg: white;
  --warning: hsl(42 94% 52%);
  --warning-fg: hsl(30 35% 12%);
  --danger: hsl(358 72% 52%);
  --danger-fg: white;
  --neutral: hsl(24 12% 38%);
  --neutral-fg: white;

  --surface: hsl(34 70% 97%);
  --surface-raised: hsl(30 80% 99%);
  --surface-subtle: hsl(28 62% 92%);
  --surface-solid: hsl(18 34% 18%);

  --text: hsl(20 34% 14%);
  --text-muted: hsl(20 12% 42%);
  --text-subtle: hsl(20 10% 55%);

  --border: hsl(25 38% 84%);
  --focus: hsl(16 75% 50%);
  --soft-fg-mix: 45%;

  /* Warm chrome — demonstrates selection and shadow-color theming. The
     selection pair rides the intent tokens, so it adapts to dark for free. */
  --selection-bg: var(--secondary);
  --selection-fg: var(--secondary-fg);
  --shadow-color: hsl(20 60% 12%);
  /* Pre-light-dark() tier, mirroring the light half below. */
  --hover-overlay: hsl(220 30% 10% / 0.04);
}

@supports (color: light-dark(red, blue)) {
  [data-theme="sunset"] {
    color-scheme: light dark;
    --primary: light-dark(hsl(16 84% 43%), hsl(16 75% 80%));
    --primary-fg: light-dark(white, hsl(16 30% 12%));
    /* Selected ink on the page: the light primary is a fill under white. */
    --state-selected-text: light-dark(
      color-mix(in oklab, var(--primary) 90%, var(--text)),
      var(--primary)
    );
    --secondary: light-dark(hsl(330 60% 52%), hsl(330 68% 80%));
    --secondary-fg: light-dark(white, hsl(330 30% 12%));
    --success: light-dark(hsl(142 52% 34%), hsl(142 60% 80%));
    --success-fg: light-dark(white, hsl(142 30% 12%));
    --warning: light-dark(hsl(42 94% 52%), hsl(42 75% 80%));
    --warning-fg: light-dark(hsl(30 35% 12%), hsl(42 30% 12%));
    --danger: light-dark(hsl(358 72% 52%), hsl(358 75% 80%));
    --danger-fg: light-dark(white, hsl(358 30% 12%));
    --neutral: light-dark(hsl(24 12% 38%), hsl(24 20% 80%));
    --neutral-fg: light-dark(white, hsl(24 30% 12%));

    --surface: light-dark(hsl(34 70% 97%), hsl(20 18% 8%));
    --surface-raised: light-dark(hsl(30 80% 99%), hsl(20 16% 11%));
    --surface-subtle: light-dark(hsl(28 62% 92%), hsl(20 14% 16%));
    --surface-solid: light-dark(hsl(18 34% 18%), hsl(0 0% 96%));

    --text: light-dark(hsl(20 34% 14%), hsl(0 0% 96%));
    --text-muted: light-dark(hsl(20 12% 42%), hsl(20 8% 68%));
    --text-subtle: light-dark(hsl(20 10% 55%), hsl(20 7% 55%));

    --border: light-dark(hsl(25 38% 84%), hsl(20 12% 24%));
    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
    --shadow-color: light-dark(hsl(20 60% 12%), hsl(20 40% 2%));
  }
}