/* Every theme's colors, in one place.

   The dashboard, the Setup page and the sign-in page all load this file, so a
   new theme is: one block here, plus one button in the Theme row of
   index.html. Nothing else needs to change; the pages accept any theme that
   has a button.

   The sign-in page loads this file before anyone has signed in, so keep it to
   colors and plain CSS: no links to images, fonts or other files (an
   automated test enforces this).
*/

:root {
  --ground: #F7F7F5;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --sunken: #F2F2EF;
  --line: #E9E8E4;
  --line-2: #DDDCD7;
  --ink: #1F1F1D;
  --ink-2: #55544F;
  /* Muted and status text all clear 4.5:1 on their own backgrounds. */
  --ink-3: #6B6A64;
  --crit: #B33016;
  --crit-bg: #FCEEEC;
  --high: #8F5A08;
  --high-bg: #FBF2E3;
  --med: #6E6012;
  --med-bg: #F6F2DF;
  --ok: #1F7A4C;
  --ok-bg: #E9F4ED;
  /* Edges of text fields and selects: 3:1 against the field in every theme. */
  --line-field: color-mix(in srgb, var(--ink) 50%, var(--surface));
  color-scheme: light;
  --idle: #ADACA6;
  --focus: #3B6FD8;
  --shadow-sm: 0 1px 2px rgba(31, 31, 29, .04);
  --shadow: 0 1px 2px rgba(31, 31, 29, .04), 0 8px 24px -12px rgba(31, 31, 29, .12);

  --f-body: "Geist", system-ui, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Consolas, monospace;

  --r-lg: 14px;
  --r-md: 9px;
  --r-sm: 6px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  --z-top: 20;
  --z-pop: 30;
  --z-chat: 40;
  --z-sheet: 50;
  --z-toast: 60;

  /* Names the Setup page still uses. */
  --bg: var(--ground);
  --panel: var(--surface);
  --panel-2: var(--sunken);
  --ink-dim: var(--ink-3);
  --accent: var(--ink);
  --low: var(--idle);
}

/* Night, chosen in the menu, or Auto on a computer set to dark. */
:root[data-theme="night"] {
  color-scheme: dark;
  --ground: #151514;
  --surface: #1C1C1A;
  --raised: #222220;
  --sunken: #191917;
  --line: #2B2B28;
  --line-2: #373733;
  --ink: #ECECE8;
  --ink-2: #B4B3AD;
  --ink-3: #908F89;
  --crit: #EE8474;
  --crit-bg: #3A2320;
  --high: #E0A457;
  --high-bg: #362A1A;
  --med: #D2BF6A;
  --med-bg: #302C19;
  --ok: #7CC093;
  --ok-bg: #1D3024;
  --idle: #6B6A65;
  --focus: #7EA2EE;
  --shadow-sm: none;
  --shadow: 0 10px 30px -14px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --ground: #151514;
    --surface: #1C1C1A;
    --raised: #222220;
    --sunken: #191917;
    --line: #2B2B28;
    --line-2: #373733;
    --ink: #ECECE8;
    --ink-2: #B4B3AD;
    --ink-3: #908F89;
    --crit: #EE8474;
    --crit-bg: #3A2320;
    --high: #E0A457;
    --high-bg: #362A1A;
    --med: #D2BF6A;
    --med-bg: #302C19;
    --ok: #7CC093;
    --ok-bg: #1D3024;
    --idle: #6B6A65;
    --focus: #7EA2EE;
    --shadow-sm: none;
    --shadow: 0 10px 30px -14px rgba(0, 0, 0, .6);
  }
}

/* Jade, chosen in the menu. One family of greens: deep jade ground, lighter jade
   panels, mid jade lines, mint text, bright jade accent. Severity keeps its
   ranking through lightness, from pale mint (critical) down to muted jade. */
:root[data-theme="jade"] {
  color-scheme: dark;
  --ground: #071A15;
  --surface: #0C2620;
  --raised: #103029;
  --sunken: #0A211C;
  --line: #1B4A3E;
  --line-2: #266657;
  --ink: #DFF7EE;
  --ink-2: #A8D9C8;
  --ink-3: #7FB3A3;
  --crit: #B7F5CE;
  --crit-bg: #15443A;
  --high: #6FE0B0;
  --high-bg: #123A31;
  --med: #34BFA2;
  --med-bg: #0F3229;
  --ok: #2A9D8F;
  --ok-bg: #0D2B24;
  --idle: #6B978A;
  --focus: #4FE3B4;
  --shadow-sm: none;
  --shadow: 0 10px 30px -14px rgba(0, 0, 0, .7);

  --accent: #2FD39B;
  --accent-ink: #04201A;
}
/* Anything that paints with the text colour needs the jade accent instead. */
:root[data-theme="jade"] .btn.primary,
:root[data-theme="jade"] .brand .star,
:root[data-theme="jade"] .skip,
:root[data-theme="jade"] .preview-banner,
:root[data-theme="jade"] .toast {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
:root[data-theme="jade"] .toast.err { background: var(--crit); color: var(--accent-ink); }
:root[data-theme="jade"] td a,
:root[data-theme="jade"] .link-btn,
:root[data-theme="jade"] .banner a,
:root[data-theme="jade"] .sitrep-sub b { color: var(--accent); }

/* Pink, chosen in the menu. Soft pink ground, white panels, deep magenta accent
   for buttons, links and active bars. Severity keeps its own red, amber, olive
   and green so a flagged row never reads as just more pink. */
:root[data-theme="pink"] {
  --ground: #FFF2F7;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --sunken: #FDE8F1;
  --line: #F6D3E3;
  --line-2: #EAB3CB;
  --ink: #2A1220;
  --ink-2: #5B2C45;
  --ink-3: #8A5A6E;
  --crit: #B33016;
  --crit-bg: #FDE8E3;
  --high: #8F5A08;
  --high-bg: #FBF1DE;
  --med: #6E6012;
  --med-bg: #F5F2DC;
  --ok: #1F7A4C;
  --ok-bg: #E4F3EA;
  --idle: #BC9DAA;
  --focus: #3B62D8;
  --shadow-sm: 0 1px 2px rgba(80, 20, 50, .05);
  --shadow: 0 1px 2px rgba(80, 20, 50, .05), 0 8px 24px -12px rgba(80, 20, 50, .18);

  --accent: #C2186B;
  --accent-ink: #FFF2F7;
}
/* Anything that paints with the text colour needs the pink accent instead. */
:root[data-theme="pink"] .btn.primary,
:root[data-theme="pink"] .brand .star,
:root[data-theme="pink"] .skip,
:root[data-theme="pink"] .preview-banner,
:root[data-theme="pink"] .toast {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
:root[data-theme="pink"] .toast.err { background: var(--crit); color: #FFFFFF; }
:root[data-theme="pink"] td a,
:root[data-theme="pink"] .link-btn,
:root[data-theme="pink"] .banner a,
:root[data-theme="pink"] .sitrep-sub b { color: var(--accent); }
:root[data-theme="pink"] .rule.active .rule-bar i { background: var(--accent); }

/* A real rainbow behind the page: one wide arc rising from below the viewport,
   in saturated bands strong enough to see at a glance, plus a pink wash at the
   top. It is part of the page background, so it stays behind every panel, table
   and chart, and those all keep their opaque white surfaces, so data always
   sits on a clean background. Fixed attachment keeps the arc still while the
   page scrolls, and nothing here animates, so reduced-motion needs no
   exception. The bands stay light enough that dark text over the open
   background keeps well over the contrast minimum. */
:root[data-theme="pink"] body {
  background-image:
    radial-gradient(circle 132vh at 50% 132vh,
      rgba(255, 255, 255, 0) 60vh,
      rgba(152, 68, 210, .44) 70vh, rgba(152, 68, 210, .44) 75vh,
      rgba(48, 114, 226, .44) 80vh, rgba(48, 114, 226, .44) 85vh,
      rgba(36, 170, 104, .44) 90vh, rgba(36, 170, 104, .44) 95vh,
      rgba(242, 206, 46, .62) 100vh, rgba(242, 206, 46, .62) 105vh,
      rgba(250, 138, 40, .54) 110vh, rgba(250, 138, 40, .54) 115vh,
      rgba(232, 44, 108, .48) 120vh, rgba(232, 44, 108, .48) 125vh,
      rgba(255, 255, 255, 0) 134vh),
    linear-gradient(180deg, rgba(255, 205, 230, .5) 0%, rgba(255, 205, 230, 0) 38%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* The two muted lines that sit on the open background, not on a panel, take the
   stronger text colour so they stay easy to read over the bands. */
:root[data-theme="pink"] .eyebrow,
:root[data-theme="pink"] .sample-note { color: var(--ink-2); }
/* Printed and saved pages stay plain. */
@media print {
  :root[data-theme="pink"] body { background-image: none; }
}

/* Blue Ocean, chosen in the menu. Deep navy ground, opaque ocean-blue panels,
   near-white text, and one teal-azure accent for buttons, links, active bars and
   chart series. Severity keeps its own coral, amber, sand and green, kept well
   away from the blue accents so a flagged row still stands out. */
:root[data-theme="blue-ocean"] {
  color-scheme: dark;
  --ground: #08203A;
  --surface: #11314F;
  --raised: #16395A;
  --sunken: #0D2842;
  --line: #1E4A70;
  --line-2: #2C6390;
  --ink: #EBF5FF;
  --ink-2: #BAD6EE;
  --ink-3: #9CBFDB;
  --crit: #FF9B87;
  --crit-bg: #4A2229;
  --high: #F7BD63;
  --high-bg: #44311B;
  --med: #E4D673;
  --med-bg: #3A3520;
  --ok: #5FD68A;
  --ok-bg: #16392B;
  --idle: #7A98B1;
  --focus: #6FD4F5;
  --shadow-sm: none;
  --shadow: 0 10px 30px -14px rgba(0, 10, 25, .75);

  --accent: #22C7EA;
  --accent-ink: #04203A;
}
/* Anything that paints with the text colour needs the ocean accent instead. */
:root[data-theme="blue-ocean"] .btn.primary,
:root[data-theme="blue-ocean"] .brand .star,
:root[data-theme="blue-ocean"] .skip,
:root[data-theme="blue-ocean"] .preview-banner,
:root[data-theme="blue-ocean"] .toast {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
:root[data-theme="blue-ocean"] .toast.err { background: var(--crit); color: var(--accent-ink); }
:root[data-theme="blue-ocean"] td a,
:root[data-theme="blue-ocean"] .link-btn,
:root[data-theme="blue-ocean"] .banner a,
:root[data-theme="blue-ocean"] .sitrep-sub b { color: var(--accent); }
:root[data-theme="blue-ocean"] .rule.active .rule-bar i { background: var(--accent); }

/* The ocean behind the page: a depth gradient from a lit surface blue at the top
   down to deep navy, one wide curve where the water gets deeper, and layered
   wave crests rising from the bottom of the viewport, each one a broad ellipse
   so the curves read as water. It is part of the page background, so it stays
   behind every panel, table and chart, and those all keep their opaque
   surfaces, so data always sits on a clean background. The light crests stay in
   the lower quarter, where only open background sits, so text keeps its
   contrast; everything above them only darkens. Fixed attachment keeps the
   water still while the page scrolls, and nothing here animates, so reduced
   motion needs no exception. */
:root[data-theme="blue-ocean"] body {
  background-image:
    radial-gradient(ellipse 150vw 32vh at 50% -4vh,
      rgba(150, 225, 250, .10), rgba(150, 225, 250, 0) 72%),
    radial-gradient(ellipse 140vw 48vh at 30% 104vh,
      rgba(146, 232, 250, 0) 56.5%, rgba(146, 232, 250, .42) 58%,
      rgba(146, 232, 250, .42) 60.4%, rgba(146, 232, 250, 0) 62%),
    radial-gradient(ellipse 175vw 54vh at 72% 114vh,
      rgba(118, 212, 242, 0) 55%, rgba(118, 212, 242, .36) 56.5%,
      rgba(118, 212, 242, .36) 58.4%, rgba(118, 212, 242, 0) 60%),
    radial-gradient(ellipse 140vw 30vh at 38% 108vh,
      rgba(46, 156, 204, .34) 0, rgba(46, 156, 204, .34) 99%, rgba(46, 156, 204, 0) 100%),
    radial-gradient(ellipse 165vw 26vh at 68% 114vh,
      rgba(8, 44, 78, .70) 0, rgba(8, 44, 78, .70) 99%, rgba(8, 44, 78, 0) 100%),
    radial-gradient(ellipse 150vw 46vh at 62% 108vh,
      rgba(5, 26, 48, .45) 0, rgba(5, 26, 48, .45) 99%, rgba(5, 26, 48, 0) 100%),
    radial-gradient(ellipse 175vw 62vh at 36% 108vh,
      rgba(4, 18, 36, .55) 0, rgba(4, 18, 36, .55) 99%, rgba(4, 18, 36, 0) 100%),
    linear-gradient(180deg, #103F63 0%, #0A2842 46%, #051324 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* Printed and saved pages stay plain. */
@media print {
  :root[data-theme="blue-ocean"] body { background-image: none; }
}
/* The two muted lines that sit on the open background, not on a panel, take the
   stronger text colour so they stay easy to read over the water. */
:root[data-theme="blue-ocean"] .eyebrow,
:root[data-theme="blue-ocean"] .sample-note { color: var(--ink-2); }