[data-theme="ocean"] {
  /* 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(198 82% 35%);
  --primary-fg: white;
  --secondary: hsl(174 58% 30%);
  --secondary-fg: white;
  --success: hsl(160 62% 30%);
  --success-fg: white;
  --warning: hsl(36 90% 50%);
  --warning-fg: hsl(35 35% 12%);
  --danger: hsl(350 70% 48%);
  --danger-fg: white;
  --neutral: hsl(205 12% 38%);
  --neutral-fg: white;

  --surface: hsl(200 50% 98%);
  --surface-raised: hsl(0 0% 100%);
  --surface-subtle: hsl(198 42% 94%);
  --surface-solid: hsl(204 38% 16%);

  --text: hsl(205 34% 14%);
  --text-muted: hsl(205 12% 42%);
  --text-subtle: hsl(205 10% 56%);

  --border: hsl(198 30% 84%);
  /* Mid-tone of the primary hue, one value for both schemes: the focus line
     must hold 3:1 on --surface and --surface-solid alike. */
  --focus: hsl(198 75% 42%);
  /* Pre-light-dark() tier, mirroring the light half below. */
  --hover-overlay: hsl(220 30% 10% / 0.04);
  --shadow-color: hsl(220 30% 10%);
  /* Soft ink rebated halfway toward the text: the raw light intents sit near
     4.2:1 on their tint (warning at 2:1). Toward a light text in dark, so the
     dark half only gains. */
  --soft-fg-mix: 50%;
}

@supports (color: light-dark(red, blue)) {
  [data-theme="ocean"] {
    color-scheme: light dark;
    --primary: light-dark(hsl(198 82% 35%), hsl(198 75% 80%));
    --primary-fg: light-dark(white, hsl(198 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) 95%, var(--text)),
      var(--primary)
    );
    --secondary: light-dark(hsl(174 58% 30%), hsl(174 66% 80%));
    --secondary-fg: light-dark(white, hsl(174 30% 12%));
    --success: light-dark(hsl(160 62% 30%), hsl(160 70% 80%));
    --success-fg: light-dark(white, hsl(160 30% 12%));
    --warning: light-dark(hsl(36 90% 50%), hsl(36 75% 80%));
    --warning-fg: light-dark(hsl(35 35% 12%), hsl(36 30% 12%));
    --danger: light-dark(hsl(350 70% 48%), hsl(350 75% 80%));
    --danger-fg: light-dark(white, hsl(350 30% 12%));
    --neutral: light-dark(hsl(205 12% 38%), hsl(205 20% 80%));
    --neutral-fg: light-dark(white, hsl(205 30% 12%));

    --surface: light-dark(hsl(200 50% 98%), hsl(200 18% 8%));
    --surface-raised: light-dark(hsl(0 0% 100%), hsl(200 16% 11%));
    --surface-subtle: light-dark(hsl(198 42% 94%), hsl(200 14% 16%));
    --surface-solid: light-dark(hsl(204 38% 16%), hsl(0 0% 96%));

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

    --border: light-dark(hsl(198 30% 84%), hsl(200 12% 24%));
    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
    --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%));
  }
}