: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.
     --highlight-color is the accent as the app uses it for links, labels,
     focus rings and borders: the accent's ink, defined with the swatches. */
  --base-accent: var(--accent-teal);
  --highlight-color: var(--accent-teal-ink);

  /* The neutrals take the accent's hue at a very low chroma, so each accent
     tints the whole page a little and is not only a line colour. The
     lightness is close to the old greys. Text is not pure black or white:
     that is what made the dark theme glare. */
  --bg-color: light-dark(oklch(from var(--base-accent) 0.985 0.004 h), oklch(from var(--base-accent) 0.205 0.008 h));
  --bg-highlight-color: light-dark(oklch(from var(--base-accent) 0.945 0.01 h), oklch(from var(--base-accent) 0.38 0.012 h));
  --bg-notification-color: light-dark(oklch(from var(--base-accent) 0.995 0.002 h), oklch(from var(--base-accent) 0.25 0.01 h));
  --fg-color: light-dark(oklch(from var(--base-accent) 0.22 0.012 h), oklch(from var(--base-accent) 0.94 0.006 h));
  --mid-color: light-dark(oklch(from var(--base-accent) 0.42 0.015 h), oklch(from var(--base-accent) 0.8 0.012 h));
  --border-color: light-dark(oklch(from var(--base-accent) 0.86 0.01 h), oklch(from var(--base-accent) 0.42 0.012 h));

  /* A tint of the swatch, behind text that keeps its own colour: hovers, the
     selected row. */
  --accent-wash: oklch(from var(--base-accent) l c h / 0.13);

  /* Header colors with transparency */
  --header-bg-color: oklch(from var(--button-bg) 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)
  );

  /* Red text has to keep 4.5:1 on the alert banner, whose tint is this same
     red. In the dark theme that takes a lighter red than looks "pure".
     TestBrowserTheDangerRedKeepsTextReadable measures it. */
  --danger-color: light-dark(rgb(180, 9, 9), rgb(242, 90, 90));
  --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;
}

/* Each accent twice. The swatch is the colour Settings shows and the tint
   behind hovers. The ink is for text, rings, borders and most button fills:
   the most saturated colour inside sRGB that keeps 4.8:1 on the light
   background or 5.2:1 on the dark one. Each hue reaches the edge of sRGB at a
   different lightness, so no one formula gives these. They were computed in
   OKLCH and measured in Chrome (TestBrowserEveryAccentKeepsTextReadable).

   Two choices on top of the computation: yellow's light ink is hue 80, as
   hue 90 at that lightness is olive; dark green and teal stop at L 0.74 and
   0.76, as they look neon at 0.80. In the dark theme the swatch is the ink. */
:root {
  --accent-red:        light-dark(oklch(0.60 0.24 25),  var(--accent-red-ink));
  --accent-orange:     light-dark(oklch(0.78 0.25 50),  var(--accent-orange-ink));
  --accent-yellow:     light-dark(oklch(0.82 0.17 90),  var(--accent-yellow-ink));
  --accent-green:      light-dark(oklch(0.60 0.25 135), var(--accent-green-ink));
  --accent-teal:       light-dark(oklch(0.75 0.17 170), var(--accent-teal-ink));
  --accent-blue:       light-dark(oklch(0.58 0.22 250), var(--accent-blue-ink));
  --accent-purple:     light-dark(oklch(0.62 0.21 290), var(--accent-purple-ink));
  --accent-pink:       light-dark(oklch(0.66 0.28 345), var(--accent-pink-ink));

  --accent-red-ink:    light-dark(oklch(0.565 0.222 25),  oklch(0.665 0.215 25));
  --accent-orange-ink: light-dark(oklch(0.55 0.141 50),   oklch(0.715 0.183 50));
  --accent-yellow-ink: light-dark(oklch(0.545 0.11 80),   oklch(0.79 0.157 90));
  --accent-green-ink:  light-dark(oklch(0.53 0.15 135),   oklch(0.74 0.21 135));
  --accent-teal-ink:   light-dark(oklch(0.525 0.101 170), oklch(0.76 0.146 170));
  --accent-blue-ink:   light-dark(oklch(0.54 0.148 250),  oklch(0.655 0.18 250));
  --accent-purple-ink: light-dark(oklch(0.565 0.252 290), oklch(0.655 0.193 290));
  --accent-pink-ink:   light-dark(oklch(0.57 0.235 345),  oklch(0.67 0.271 345));
}

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

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

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

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

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

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

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

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

/* A button's fill and label. On white, these four accents are readable as
   text only once they are darkened to rust, ochre, forest and olive. A button
   does not have to be: filled with the swatch itself, it carries black text
   at 5.8:1 (green) to 12:1 (yellow). Teal is here as the default, so the
   sign-in page gets it too. The other four fill with the ink and white text.
   In the dark theme every button is the ink with black text. */
:root,
[data-color="orange"],
[data-color="yellow"],
[data-color="green"],
[data-color="teal"] {
  --button-bg: light-dark(var(--base-accent), var(--highlight-color));
  --button-fg-color: black;
}

[data-color="red"],
[data-color="blue"],
[data-color="purple"],
[data-color="pink"] {
  --button-bg: var(--highlight-color);
  --button-fg-color: light-dark(white, black);
}