/* =============================================================================
   LAYER 2 — SEMANTIC ROLES (DARK)
   -----------------------------------------------------------------------------
   The same product after sundown, not a different one. Every role defined in
   semantic-light.css is redefined here — no role may exist in one theme only,
   or a component will fall back to an inherited light value on a dark surface.

   The dark theme keeps a deep, slightly cool blue-black foundation — the light
   theme with the lights off, not a second product. The medical blue and the
   teal signature are the lifted notes against it. Surfaces climb in real steps
   so panels separate by depth rather than by hard rules, and nothing is pure
   #000 or pure #FFF.

       #0e131a  page
       #172029  card / navbar
       #232f3c  popup, dialog, drawer, input fill
============================================================================= */

[data-theme="dark"],
.app-root.theme-dark {
  /* ================================================= brand: primary ========
     Medical blue, lifted. #0b5fa6 is far too dark against the blue-black page —
     a primary button in it would sink — so the dark theme takes a mid step of
     the same hue. It is held deliberately below the lightest blues so the white
     label survives the HOVER state too, which is where a lifted accent usually
     breaks: white on this is 5.0:1 at rest and still 4.7:1 on hover. */
  --color-primary: #2a72ba;
  --color-primary-hover: #2d76bd;
  --color-primary-pressed: #22578f;
  /* Solid, not translucent: a soft surface is stacked on cards, rows and
     dialogs at different depths, and an alpha wash would drift with each one. */
  --color-primary-soft: #142433;
  --color-primary-soft-hover: #1a2f43;
  --color-primary-ink: #85b6ec;
  --color-primary-ring: rgb(42 114 186 / 34%);
  --text-on-primary: #ffffff;

  /* ================================================ brand: secondary ======= */
  --color-secondary: #2bb0bf;
  --color-secondary-hover: #45c3d0;
  --color-secondary-pressed: var(--teal-500);
  --color-secondary-soft: #103038;
  --color-secondary-soft-hover: #14424b;
  --color-secondary-ink: #62d4dd;
  --color-secondary-bright: #62d4dd;
  --color-secondary-ring: rgb(43 176 191 / 30%);
  --text-on-secondary: #06232a;

  /* ================================================= brand: tertiary ======= */
  --color-tertiary: #c7d2df;
  --color-tertiary-hover: #dde5ee;
  --color-tertiary-soft: #262f3a;
  --color-tertiary-soft-hover: #313c48;
  --color-tertiary-ink: #c7d2df;
  --text-on-tertiary: #12171d;

  /* ============================================ backgrounds and surfaces === */
  --background-page: #0e131a;
  --background-workspace: #121821;

  --surface-primary: #172029;
  --surface-secondary: #1e2833;
  --surface-secondary-hover: #27323f;
  --surface-tertiary: #14263c;
  --surface-elevated: #232f3c;
  --surface-sunken: #0f151d;

  --surface-hover: #202b38;
  --surface-menu-hover: #27323f;
  --surface-selected: #1c3a5c;
  --surface-selected-hover: #234671;
  --surface-disabled: #1a222c;

  /* ============================================================== text ===== */
  --text-primary: #eef3f9;   /* cool near-white, never #FFF */
  --text-secondary: #c2cdd9;
  --text-muted: #8b97a4;
  --text-disabled: #5f6b78;
  --text-placeholder: #97a3b0;
  --text-inverse: var(--slate-900);

  /* ============================================================ borders ==== */
  --border-subtle: #29323d;
  --border-default: #3b4653;
  --border-strong: #55616f;
  /* Must clear 3:1 against BOTH the field fill (#232f3c) and the panel behind
     it, which --border-default and --border-strong both miss. */
  --border-control: #8b97a4;
  --focus-ring: #5b9de4;

  /* ============================================== status (not brand) ======= */
  --status-success: #4fa87a;
  --status-success-hover: #6cbf94;
  --status-success-soft: #163427;
  --status-success-soft-hover: #1d4433;
  --status-success-ink: #8ad4aa;
  --status-success-ring: rgb(79 168 122 / 30%);

  --status-warning: #cf9a45;
  --status-warning-hover: #e0b063;
  --status-warning-soft: #362a15;
  --status-warning-soft-hover: #45361b;
  --status-warning-ink: #edc684;

  --status-danger: #d4726c;
  --status-danger-hover: #e28c86;
  --status-danger-soft: #3d211f;
  --status-danger-soft-hover: #4d2b28;
  --status-danger-ink: #f0aca6;
  --status-danger-ring: rgb(212 114 108 / 32%);

  --status-info: #7d9cad;
  --status-info-hover: #96b2c1;
  --status-info-soft: #1e2b32;
  --status-info-soft-hover: #273841;
  --status-info-ink: #a9c2d1;

  --status-ai: #9b85d0;
  --status-ai-hover: #b09ddc;
  --status-ai-soft: #2b2440;
  --status-ai-soft-hover: #372e51;
  --status-ai-ink: #c9bbe9;

  --text-on-status: #0e1114;

  /* ========================================================== elevation ====
     Deep and restrained — black at low opacity, never a coloured glow. */
  --shadow-xs: 0 1px 3px rgb(0 0 0 / 32%);
  --shadow-sm: 0 4px 14px rgb(0 0 0 / 26%);
  --shadow-md: 0 8px 26px rgb(0 0 0 / 32%);
  --shadow-lg: 0 22px 60px rgb(0 0 0 / 50%);
  --shadow-modal: 0 28px 70px rgb(0 0 0 / 60%);
  --scrim: rgb(4 8 14 / 70%);

  /* ============================================== product-specific roles === */
  --now-line: #5b9de4;

  --bubble-patient: #232f3c;
  --bubble-patient-ink: #eef3f9;
  --bubble-staff: #1c3a5c;
  --bubble-staff-ink: #eef3f9;
  /* AI reads periwinkle here too — distinct from the blue staff bubble. */
  --bubble-ai: #262457;
  --bubble-ai-ink: #dfe3f7;

  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238b97a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}