/* GuildPhone theme layer, on top of Nocturne (nocturne.css is dark by default).

   The light tokens are the "Light mode overrides" from
   docs/design/ui-overhaul/README.md, verbatim. They are a project extension,
   not part of Nocturne. The README leaves accent-600 unchanged (#796cbf),
   which is what is written below. The md/lg shadow ring colours are not
   specified there; #d3d7e8 and #b2b6ca are ours.

   Which theme applies is decided by <html data-theme="light|dark">, written by
   the server from the gp_theme cookie (or ?theme=). With no attribute the
   system decides. The light block appears twice on purpose: once for an
   explicit choice, once for "match system", and CSS cannot share them.
   Edit both together. */

:root {
  color-scheme: dark;
  --gp-good: #5fc08b;
  --gp-warn-bg: #2b2718;
  --gp-warn-line: #5c5227;
  --gp-bad: #f08a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #eceef8;
  --color-surface: #f8f9ff;
  --color-text: #1d1f2b;
  --color-accent: #6f62b8;
  --color-divider: color-mix(in srgb, #1d1f2b 16%, transparent);

  --color-neutral-100: #292b31;
  --color-neutral-200: #3f424d;
  --color-neutral-300: #4c505e;
  --color-neutral-400: #5f6374;
  --color-neutral-500: #6b6f82;
  --color-neutral-600: #9397ab;
  --color-neutral-700: #b2b6ca;
  --color-neutral-800: #dfe2f0;
  --color-neutral-900: #f3f5fe;

  --color-accent-100: #423a6a;
  --color-accent-200: #4f4680;
  --color-accent-300: #5d5294;
  --color-accent-400: #796cbf;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #cdc8f7;
  --color-accent-800: #e4e1fb;
  --color-accent-900: #efedfd;

  --shadow-sm: 0 0 0 1px #d3d7e8;
  --shadow-md: 0 0 0 1px #d3d7e8, 0 6px 18px rgba(30,32,60,0.12);
  --shadow-lg: 0 0 0 1px #b2b6ca, 0 16px 40px rgba(30,32,60,0.18);

  --gp-good: #17734a;
  --gp-warn-bg: #fdf8e3;
  --gp-warn-line: #e3d49a;
  --gp-bad: #a32020;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --color-bg: #eceef8;
    --color-surface: #f8f9ff;
    --color-text: #1d1f2b;
    --color-accent: #6f62b8;
    --color-divider: color-mix(in srgb, #1d1f2b 16%, transparent);

    --color-neutral-100: #292b31;
    --color-neutral-200: #3f424d;
    --color-neutral-300: #4c505e;
    --color-neutral-400: #5f6374;
    --color-neutral-500: #6b6f82;
    --color-neutral-600: #9397ab;
    --color-neutral-700: #b2b6ca;
    --color-neutral-800: #dfe2f0;
    --color-neutral-900: #f3f5fe;

    --color-accent-100: #423a6a;
    --color-accent-200: #4f4680;
    --color-accent-300: #5d5294;
    --color-accent-400: #796cbf;
    --color-accent-500: #968ae0;
    --color-accent-600: #796cbf;
    --color-accent-700: #cdc8f7;
    --color-accent-800: #e4e1fb;
    --color-accent-900: #efedfd;

    --shadow-sm: 0 0 0 1px #d3d7e8;
    --shadow-md: 0 0 0 1px #d3d7e8, 0 6px 18px rgba(30,32,60,0.12);
    --shadow-lg: 0 0 0 1px #b2b6ca, 0 16px 40px rgba(30,32,60,0.18);

    --gp-good: #17734a;
    --gp-warn-bg: #fdf8e3;
    --gp-warn-line: #e3d49a;
    --gp-bad: #a32020;
  }
}