/* GENERATED by web/theme-to-css.py from code/nix/theme.nix — do not edit.
 *
 * The desktop in the screenshots and the page around them read the same
 * attrset. Change a colour there and it changes here on the next build; there
 * is no second copy to forget.
 *
 * Dark is the root palette because aphrOS is a dark system first — "under the
 * water", in theme.nix's own words. Light ("the foam itself") arrives through
 * the viewer's preference, and the toggle overrides either way.
 */

:root {
  --base: #1b2430;
  --mantle: #161d27;
  --crust: #111720;
  --surface0: #23303f;
  --surface1: #31414f;
  --surface2: #425463;
  --text: #eef2f5;
  --subtext: #b7c4cf;
  --muted: #7e8fa0;
  --rose: #e8a0a8;
  --coral: #f0a58f;
  --gold: #e3c08d;
  --myrtle: #8fc7a6;
  --aegean: #7fb3c8;
  --iris: #b9a3d4;
  --alert: #e0798c;
  --accent: #e8a0a8;
  --accent-alt: #f0a58f;
  --ok: #8fc7a6;
  --warn: #e3c08d;
  --err: #e0798c;
  --info: #7fb3c8;

  --radius: 10px;
  --gap-inner: 5px;
  --gap-outer: 10px;
  --gap-float: 12px;
  --border-width: 2px;
  --shell-max: 1180px;
}

/* A viewer whose OS asks for light gets the foam — unless they have chosen
   dark on this site, in which case that choice wins. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --base: #f4efe9;
    --mantle: #ece5dd;
    --crust: #e2d9cf;
    --surface0: #e9e1d8;
    --surface1: #dbd1c6;
    --surface2: #c2b6a8;
    --text: #222c38;
    --subtext: #4c5a69;
    --muted: #7b8694;
    --rose: #b0596a;
    --coral: #b8654e;
    --gold: #8d6a2c;
    --myrtle: #3f7a58;
    --aegean: #356f8c;
    --iris: #6f549b;
    --alert: #a8415a;
    --accent: #b0596a;
    --accent-alt: #b8654e;
    --ok: #3f7a58;
    --warn: #8d6a2c;
    --err: #a8415a;
    --info: #356f8c;
  }
}

/* And the toggle wins in both directions. */
:root[data-theme="light"] {
  --base: #f4efe9;
  --mantle: #ece5dd;
  --crust: #e2d9cf;
  --surface0: #e9e1d8;
  --surface1: #dbd1c6;
  --surface2: #c2b6a8;
  --text: #222c38;
  --subtext: #4c5a69;
  --muted: #7b8694;
  --rose: #b0596a;
  --coral: #b8654e;
  --gold: #8d6a2c;
  --myrtle: #3f7a58;
  --aegean: #356f8c;
  --iris: #6f549b;
  --alert: #a8415a;
  --accent: #b0596a;
  --accent-alt: #b8654e;
  --ok: #3f7a58;
  --warn: #8d6a2c;
  --err: #a8415a;
  --info: #356f8c;
}

:root[data-theme="dark"] {
  --base: #1b2430;
  --mantle: #161d27;
  --crust: #111720;
  --surface0: #23303f;
  --surface1: #31414f;
  --surface2: #425463;
  --text: #eef2f5;
  --subtext: #b7c4cf;
  --muted: #7e8fa0;
  --rose: #e8a0a8;
  --coral: #f0a58f;
  --gold: #e3c08d;
  --myrtle: #8fc7a6;
  --aegean: #7fb3c8;
  --iris: #b9a3d4;
  --alert: #e0798c;
  --accent: #e8a0a8;
  --accent-alt: #f0a58f;
  --ok: #8fc7a6;
  --warn: #e3c08d;
  --err: #e0798c;
  --info: #7fb3c8;
}