/* MAYA's colours, in one place: every colour on every page comes from a token below. The light theme is :root's,
   the dark theme redefines the same tokens under [data-theme="dark"], which the boot script in index.html sets on
   <html> before the page is drawn (Settings › Account and access › Theme). Nothing outside these two blocks names a
   colour; tests/unit/theme.test.ts checks that. The dark palette is its own design, not an inversion: surfaces step
   up in lightness as they rise (canvas, card, dialog), lines are a step above the surface they sit on, text has four
   tiers, and each status keeps its hue with an ink bright enough to read on its own soft tint (WCAG AA, 4.5:1). */
:root {
  color-scheme: light;

  /* Mindmatrix brand: navy wordmark, arc gradient from blue through violet into orange. The same in both themes. */
  --brand-navy: #081120;
  --brand-navy-soft: #16213a;
  --brand-orange: #EF6B2A;
  --brand-orange-dark: #d55c1f;
  /* The orange for filled controls with words on them: white on it is 4.66:1, and 5.59:1 on its pressed shade. */
  --brand-orange-strong: #C4501A;
  --brand-orange-strong-dark: #A9441A;
  --brand-blue: #0F8EFB;
  --brand-violet: #7A4FC8;
  --brand-orange-soft: #fff1e8;
  --brand-orange-ink: #a8481a;
  --brand-orange-border: #f5c9ad;

  /* Surfaces, from the canvas up: a card, a dialog or menu, and the tints a row or a well takes. */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --panel: var(--surface);
  --surface-raised: #ffffff;
  --surface-muted: #f8fafc;
  --surface-sunken: #f2f5f9;
  --surface-hover: #eef2f8;
  --surface-active: #e4eaf3;
  --surface-translucent: #ffffffbf;

  /* Lines: a divider inside a card, a card's edge, a control's edge, and a firm edge on hover. */
  --border-subtle: #edf1f6;
  --border: #e3e9f1;
  --border-strong: #d6dfeb;
  --border-firm: #c1cddd;

  /* Text: headings, body, secondary and quiet. muted is 4.8:1 on --bg. faint is for icons and marks, never words. */
  --ink: #1e2b40;
  --text: #263449;
  --text-2: #44566f;
  --muted: #5f6f82;
  --placeholder: #627286;
  --faint: #8494a9;
  --on-fill: #ffffff;
  --on-status: #ffffff;

  /* Accent blue: links, selection and focus; run is what is running. */
  --accent: #3768ce;
  --accent-strong: #2f5aa8;
  --accent-ink: #1f4f9c;
  --accent-fill: #3768ce;
  --accent-fill-strong: #1f4f9c;
  --accent-wash: #f5f8fe;
  --accent-soft: #edf3ff;
  --accent-soft-hover: #e0eafb;
  --accent-border: #b6cbee;
  --run: #3d7be0;
  --focus-ring: #3d7ae0;
  --focus-ring-soft: #3768ce59;
  --focus-halo: #388bff33;

  /* Statuses: each has a strong colour for marks and lines, an ink for words, and soft tints for its background. */
  --pass: #147a4d;
  --pass-ink: #1b6a46;
  --pass-wash: #f3faf6;
  --pass-soft: #e8f6ee;
  --pass-border: #b7e0c6;
  --pass-fill: #147a4d;
  --fail: #d12b2b;
  --fail-ink: #a63129;
  --fail-wash: #fff7f5;
  --fail-soft: #fdeeec;
  --fail-border: #f2ccc5;
  --fail-line: #e39a91;
  --fail-fill: #d12b2b;
  --fail-strong: #b42318;
  --soft-fail: #c27a12;
  --soft-fail-ink: #7a4300;
  --soft-fail-soft: #fff4dc;
  --soft-fail-border: #f0d29a;
  --warn: #d07106;
  --warn-ink: #7a4a00;
  --warn-wash: #fffaf0;
  --warn-soft: #fff6e0;
  --warn-border: #ecd9a8;
  --wait-ink: #6f4a00;
  --wait-soft: #fbf1dc;
  --skip: #9ca3af;
  --skip-soft: #eef1f5;
  --skip-ink: #4b5a6e;
  --violet: #7a4fc8;
  --violet-ink: #53318d;
  --violet-soft: #f2edfa;
  --violet-border: #ddd0f2;

  /* The navy sidebar. */
  --nav-bg: #081120;
  --nav-raised: #101f36;
  --nav-active: #1c2d46;
  --nav-line: #2c3e58;
  --nav-text: #a9bad0;
  --nav-text-strong: #eef4ff;
  --nav-muted: #8196b3;
  --nav-accent: #fc9a65;
  --nav-hover: #ffffff0a;
  --nav-divider: #ffffff0d;
  --nav-edge: transparent;
  --nav-pass: #3fbf86;
  --nav-fail: #f0645a;
  --nav-run: #5aa2ff;
  --nav-idle: #6b7c95;
  --nav-tag-bg: #1b3050;
  --nav-tag-text: #a9c8f5;
  --nav-tag-production-bg: #3a2617;
  --nav-tag-production-text: #f5b88f;

  /* Dark frames: the recorded and live screens, logs and code, tooltips and toasts. */
  --screen-bg: #0b1220;
  --screen-text: #94a3b8;
  --log-bg: #0f172a;
  --log-text: #e2e8f0;
  --log-muted: #94a3b8;
  --tooltip-bg: #1f2a3a;
  --tooltip-text: #ffffff;
  --toast-bg: #081120;
  --toast-ok-bg: #136c45;
  --toast-error-bg: #b42318;
  --glass: #ffffff1f;
  --glass-strong: #ffffff38;
  --overlay: #08112073;
  --scrim: #0b1c3599;

  /* The pictures beside each theme in Settings show that theme, whichever one is on. */
  --preview-light-bg: #eef2f8;
  --preview-light-card: #ffffff;
  --preview-light-line: #c1cddd;
  --preview-dark-bg: #0b1220;
  --preview-dark-card: #1b2740;
  --preview-dark-line: #3b4e6d;

  /* The glow of MAYA's colours behind the sign-in card. */
  --auth-glow-blue: #0f8efb1f;
  --auth-glow-orange: #ef6b2a1a;

  /* Elevation. */
  --shadow-faint: #0f1e370d;
  --shadow-soft: #0f1e3717;
  --shadow-medium: #0f1e372e;
  --shadow-strong: #0811204d;
  --shadow-brand: #a9441a40;
  --shadow-danger: #a51d1d33;
  --shadow-xs: 0 1px 2px #0f1e370d;
  --shadow-sm: 0 1px 3px #0f1e370f, 0 1px 2px #0f1e3708;
  --shadow-md: 0 8px 24px #0f1e3717;
  --shadow-pop: 0 20px 56px #08112038;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-orange-soft: #2e1c12;
  --brand-orange-ink: #ffa774;
  --brand-orange-border: #6b3a1f;

  /* A deep navy canvas; cards and dialogs rise in lightness, rows tint toward the accent's hue. */
  --bg: #0b1220;
  --surface: #111a2b;
  --surface-raised: #162136;
  --surface-muted: #0f1828;
  --surface-sunken: #0d1524;
  --surface-hover: #19243a;
  --surface-active: #203049;
  --surface-translucent: #111a2bbf;

  --border-subtle: #1a2538;
  --border: #212e45;
  --border-strong: #2b3b56;
  --border-firm: #3b4e6d;

  --ink: #eef3fa;
  --text: #d5deea;
  --text-2: #b6c2d3;
  --muted: #97a6ba;
  --placeholder: #7f8ea4;
  --faint: #6e7e96;
  --on-fill: #ffffff;
  --on-status: #07111f;

  --accent: #7aa2ff;
  --accent-strong: #9ab8ff;
  --accent-ink: #bcd0ff;
  --accent-fill: #3c6bd6;
  --accent-fill-strong: #2f5cc4;
  --accent-wash: #121d35;
  --accent-soft: #15254a;
  --accent-soft-hover: #1b2f5c;
  --accent-border: #2f4b85;
  --run: #6b98ff;
  --focus-ring: #7aa2ff;
  --focus-ring-soft: #7aa2ff66;
  --focus-halo: #7aa2ff40;

  --pass: #3ccf8e;
  --pass-ink: #82e2b3;
  --pass-wash: #0d211a;
  --pass-soft: #0f2a21;
  --pass-border: #1e5a40;
  --pass-fill: #18774c;
  --fail: #ff6b61;
  --fail-ink: #ffa49c;
  --fail-wash: #221315;
  --fail-soft: #2f1619;
  --fail-border: #63282b;
  --fail-line: #9a4540;
  --fail-fill: #c4372e;
  --fail-strong: #a8291f;
  --soft-fail: #eaa53e;
  --soft-fail-ink: #f5c879;
  --soft-fail-soft: #2c2312;
  --soft-fail-border: #5e4718;
  --warn: #f0a83c;
  --warn-ink: #f6c978;
  --warn-wash: #201b10;
  --warn-soft: #2a2213;
  --warn-border: #5c4619;
  --wait-ink: #e9c27a;
  --wait-soft: #2a2313;
  --skip: #7d889a;
  --skip-soft: #1b2638;
  --skip-ink: #b3bfcf;
  --violet: #a98bf0;
  --violet-ink: #cdb8ff;
  --violet-soft: #231c3c;
  --violet-border: #45367a;

  /* The sidebar stays navy, a step darker than the canvas so it still frames the page. */
  --nav-bg: #070d18;
  --nav-raised: #0e1a2d;
  --nav-active: #18283f;
  --nav-line: #263851;
  --nav-divider: #ffffff12;
  --nav-edge: #1a2538;

  /* Frames are darker than the canvas, so a page in them reads as a page; a toast is lighter, so it is seen. */
  --screen-bg: #060a12;
  --log-bg: #080d18;
  --log-text: #dbe3ee;
  --log-muted: #8796ab;
  --tooltip-bg: #2c3a52;
  --tooltip-text: #f2f5fa;
  --toast-bg: #25324a;
  --toast-ok-bg: #13603f;
  --toast-error-bg: #a8291f;
  --overlay: #020509b3;
  --scrim: #000000a6;

  --auth-glow-blue: #0f8efb24;
  --auth-glow-orange: #ef6b2a1f;

  /* Shadows go nearly black: on a dark canvas a card is told apart by its edge more than its shadow. */
  --shadow-faint: #00000040;
  --shadow-soft: #00000059;
  --shadow-medium: #00000073;
  --shadow-strong: #0000008c;
  --shadow-brand: #00000059;
  --shadow-danger: #00000059;
  --shadow-xs: 0 1px 2px #00000059;
  --shadow-sm: 0 1px 3px #00000066, 0 1px 2px #00000040;
  --shadow-md: 0 8px 24px #00000073;
  --shadow-pop: 0 20px 56px #0000009e;
}