/* Midnight: a deep-navy variant of the dark theme, for the signed-in app.
   ---------------------------------------------------------------------------
   Not a third theme. <html> keeps data-theme="dark", so every rule in
   dark-mode.css and every "is it dark?" check in the scripts still applies;
   data-dark-tone="midnight" (theme-init.js, applyTheme in dashboard.js) swaps
   only the colour tokens those rules read, from neutral near-black to a
   blue-black navy. Nothing here restyles a component - add a token, not a
   rule, and Midnight follows Dark for free.

   Loaded on every page that loads dark-mode.css. The landing and
   onboarding pages have their own dark palette, and their Midnight is
   landing-midnight.css.

   Every tint keeps dark-mode.css's measured floors, re-measured on this
   ground (#0a0f1c): wash >= 1.15:1, surface >= 1.5:1, line >= 2.2:1 on the
   card surface, strong >= 4.5:1 (all clear 7:1). See that file's comment. */

:root[data-theme="dark"][data-dark-tone="midnight"]:not([data-print-theme="light"]) {
  --bg: #0a0f1c;
  --panel: #0a0f1c;
  --panel-strong: #111a2b;
  --ink: #e6ecf8;
  --muted: rgba(226, 233, 247, 0.78);
  --line: rgba(148, 170, 220, 0.18);
  --line-strong: rgba(148, 170, 220, 0.32);
  --accent: #c3cfe6;
  --accent-strong: #eef2fb;
  --accent-soft: rgba(148, 170, 220, 0.08);
  --accent-brand: #5fb3a8;      /* 7.74:1 */
  --focus: #8ea3d6;             /* 7.61:1 */
  --sent: #18233a;
  --received: #111a2b;

  --danger-wash: #2e1a22;       /* 1.17:1 */
  --danger-surface: #4d2a33;    /* 1.54:1 */
  --danger-line: #7e4b55;       /* 2.51:1 on the card */
  --danger-strong: #ff9a8e;     /* 9.35:1 */
  --warn-surface: #46321c;      /* 1.58:1 */
  --warn-line: #77583a;         /* 2.69:1 on the card */
  --warn-wash: #2b2116;         /* 1.21:1 */
  --good-line: #36684f;         /* 2.69:1 on the card */
  --good-wash: #12271f;         /* 1.22:1 */
  --good-strong: #62cc91;       /* 9.62:1 */
  --shadow-resting: 0 1px 3px rgba(2, 6, 18, 0.55), 0 1px 2px rgba(2, 6, 18, 0.4);
  --shadow-hover: 0 10px 24px rgba(2, 6, 18, 0.6), 0 2px 6px rgba(2, 6, 18, 0.42);
  --shadow-modal: 0 32px 70px rgba(2, 6, 18, 0.7), 0 8px 20px rgba(2, 6, 18, 0.5);

  --theruka-text: #e6ecf8;
  --theruka-muted: rgba(226, 233, 247, 0.78);
  --theruka-shadow: 0 22px 70px rgba(2, 6, 18, 0.65);
  --theruka-card-shadow: 0 14px 34px rgba(2, 6, 18, 0.5);
  --theruka-surface: #0a0f1c;
  --theruka-surface-2: #111a2b;
  --theruka-surface-3: #18233a;
  --theruka-page: #0a0f1c;
  --theruka-rail: #0a0f1c;
  --theruka-line: rgba(148, 170, 220, 0.18);

  --canvas: #0a0f1c;
  --surface: #111a2b;
  --surface-soft: #18233a;
  --pill: rgba(148, 170, 220, 0.12);
  --pill-hover: rgba(148, 170, 220, 0.18);
  --nav-active: rgba(148, 170, 220, 0.16);

  --theruka-ui-bg: #0a0f1c;
  --theruka-panel-bg: rgba(17, 26, 43, 0.97);
  --theruka-soft-border: rgba(148, 170, 220, 0.16);
  --theruka-muted-text: rgba(226, 233, 247, 0.78);
  --theruka-strong-text: #e6ecf8;
  --theruka-shadow-soft: 0 18px 45px rgba(2, 6, 18, 0.5);
}

/* The few dark surfaces dark-mode.css writes as literals rather than tokens.
   Same selectors, one attribute more, so these win without !important. */
:root[data-dark-tone="midnight"][data-theme="dark"] .owner-picker-dropdown {
  background: #111a2b;
}

@media screen {
  :root[data-dark-tone="midnight"][data-theme="dark"]:not([data-print-theme="light"]) .floating-detail-panel.is-dialog,
  :root[data-dark-tone="midnight"][data-theme="dark"]:not([data-print-theme="light"]) .floating-detail-panel.is-dialog .guided-step-actions,
  :root[data-dark-tone="midnight"][data-theme="dark"]:not([data-print-theme="light"]) .confirm-overlay .confirm-panel,
  :root[data-dark-tone="midnight"][data-theme="dark"]:not([data-print-theme="light"]) .project-card-panel,
  :root[data-dark-tone="midnight"][data-theme="dark"]:not([data-print-theme="light"]) .section-editor-panel {
    background: #1a2540;
  }
}

/* Selected text in the theme's own hue rather than the browser's blue. */
:root[data-dark-tone="midnight"][data-theme="dark"] ::selection {
  background: rgba(110, 140, 215, 0.42);
  color: #ffffff;
}