:root {
  color-scheme: light dark;

  /* Base accent color - change this one variable to update entire color scheme.
     Teal is the default; [data-color] further down swaps in another accent. */
  --base-accent: var(--accent-teal);

  --bg-color: light-dark(white, color(display-p3 0.091 0.091 0.091));
  --bg-highlight-color: light-dark(#eee, #4d4d4d);
  --bg-notification-color: light-dark(white, #222);
  --fg-color: light-dark(black, white);
  --mid-color: light-dark(#494949, #c6c6c6);
  --border-color: light-dark(oklch(0.64 0 0), oklch(0.56 0 0));
  --button-fg-color: white;

  --highlight-color: var(--base-accent);
  --highlight-contrast-color: var(--button-fg-color);

  /* Hover always moves toward more contrast. Against the page that means darker
     on light and lighter on dark; on the header, where the text is
     --button-fg-color rather than --fg-color, it means stepping away from that.
     The resting colour is already the contrast-safe one, so hover steps further
     rather than falling back to the bare accent. */
  --link-color: light-dark(
    oklch(from var(--base-accent) calc(l - 0.20) c h),
    var(--base-accent)
  );
  --link-hover-color: light-dark(
    oklch(from var(--base-accent) calc(l - 0.35) c h),
    oklch(from var(--base-accent) calc(l + 0.20) c h)
  );

  /* A wash of the accent, for showing a control is "on" where a solid fill
     would read as a button. Weak against the page (~1.2:1) by design — the
     border carries the state, not the wash. */
  --accent-wash-color: oklch(from var(--base-accent) l c h / 0.25);

  /* Header colors with transparency. On light the 0.85 alpha composites toward
     white, so the accent is darkened first to keep --button-fg-color legible
     over it; on dark it composites toward near-black and needs no help. The
     0.07 is sized for a P3 display, where the wide-gamut greens render lighter
     than their sRGB clamp and so contrast worse. */
  --header-accent: light-dark(
    oklch(from var(--base-accent) calc(l - 0.07) c h),
    var(--base-accent)
  );
  --header-bg-color: oklch(from var(--header-accent) l c h / 0.85);

  /* Hover steps away from --button-fg-color: darker under white text, lighter
     under black. It mixes from the header already composited over the page
     rather than from the raw accent, because the hover's own 0.85 alpha lets
     that composite back through — mixing from it is what keeps the step the
     same size in both directions. Pure black/white as the far end leaves the
     gray accent at chroma 0. */
  --header-link-hover-color: oklch(
    from color-mix(
      in oklab,
      color-mix(in display-p3, var(--header-accent) 85%, var(--bg-color)),
      oklch(from var(--button-fg-color) calc(1 - l) 0 0) 25%
    )
    l c h / 0.85
  );

  --header-shadow: light-dark(
    0 0 0.5em rgba(106, 106, 106, 0.05),
    0 0 0.5em rgba(0,0,0,0.02)
  ),
  light-dark(
    0 0 0.5em rgba(0,0,0,0.02),
    0 0 0.5em rgba(0,0,0,0.02)
  ),
  light-dark(
    inset 0 -0.0625rem 0 0 rgba(255,255,255, 0.25),
    inset 0 -0.0625em 0 0 rgba(255,255,255, 0.25)
  ),
  light-dark(
    inset 0 0.0625em 0 0 rgba(255,255,255, 0.5),
    inset 0 0.0625em 0 0 rgba(255,255,255, 0.25)
  );

  --danger-color: light-dark(rgb(180, 9, 9), rgb(231, 47, 47));
  --positive-color: light-dark(color(display-p3 0.145 0.655 0.029), color(display-p3 0.23 0.786 0.104));
}

/* Explicit light theme - overrides system preference */
[data-theme="light"] {
  color-scheme: light;
}

/* Explicit dark theme - overrides system preference */
[data-theme="dark"] {
  color-scheme: dark;
}

/* A colour that reads well on white is almost never the one that reads well on
   near-black, so every accent is a light-dark() pair. These tokens are the only
   copy of the palette: the [data-color] rules below point at them, and so do the
   picker swatches in settings/display. */
:root {
  --accent-red:    light-dark(oklch(0.60 0.24 25),  oklch(0.58 0.24 25));
  --accent-orange: light-dark(oklch(0.78 0.25 50),  oklch(0.78 0.25 50));
  --accent-yellow: light-dark(oklch(0.82 0.17 90),  oklch(0.82 0.14 90));
  --accent-green:  light-dark(oklch(0.60 0.25 135), oklch(0.75 0.25 135));
  --accent-teal:   light-dark(oklch(0.75 0.17 170), oklch(0.75 0.17 170));
  --accent-blue:   light-dark(oklch(0.58 0.22 250), oklch(0.58 0.22 250));
  --accent-purple: light-dark(oklch(0.62 0.21 290), oklch(0.70 0.22 290));
  --accent-pink:   light-dark(oklch(0.66 0.28 345), oklch(0.72 0.28 345));
  --accent-gray:   light-dark(oklch(0.58 0 0),      oklch(0.58 0 0));
}

/* Color palette - override base accent color */
[data-color="red"] {
  --base-accent: var(--accent-red);
}

[data-color="orange"] {
  --base-accent: var(--accent-orange);
  --button-fg-color: black;
}

[data-color="yellow"] {
  --base-accent: var(--accent-yellow);
  --button-fg-color: black;
}

[data-color="green"] {
  --base-accent: var(--accent-green);
  --button-fg-color: light-dark(white, black);
}

[data-color="teal"] {
  --base-accent: var(--accent-teal);
  --button-fg-color: black;
}

[data-color="blue"] {
  --base-accent: var(--accent-blue);
}

[data-color="purple"] {
  --base-accent: var(--accent-purple);
  --button-fg-color: light-dark(white, black);
}

[data-color="pink"] {
  --base-accent: var(--accent-pink);
  --button-fg-color: light-dark(white, black);
}

[data-color="gray"] {
  --base-accent: var(--accent-gray);
}