/* ==========================================================================
   Clarity Clinical theme tokens
   Change colors here — the rest of the UI reads these variables.
   Palette from Concept 1 — Clarity Clinical (enterprise navy & teal).
   ========================================================================== */

:root {
  /* Brand */
  --color-navy: #0b3853;
  --color-navy-mid: #16425c;
  --color-navy-hover: #214961;
  --color-teal: #0e7c86;
  --color-teal-hover: #0c6c75;
  --color-teal-soft: #e3f3f3;
  --color-teal-muted: #d7eef0;

  /* Surfaces */
  --color-bg: #f5f8fa;
  --color-surface: #ffffff;
  --color-header: #ffffff;
  --color-sidebar: var(--color-navy);
  --color-sidebar-text: rgba(255, 255, 255, 0.78);
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-active: var(--color-navy-hover);

  /* Text */
  --color-text: #1c2b36;
  --color-text-muted: #64748b;
  --color-text-on-dark: #ffffff;
  --color-heading: #0f2740;

  /* Lines & states */
  --color-border: #e2e8ee;
  --color-border-strong: #cfd8e3;
  --color-focus: var(--color-teal);
  --color-success: #1f8a4c;
  --color-success-soft: #e8f7ee;
  --color-warning: #c47a12;
  --color-warning-soft: #fff4e0;
  --color-danger: #c23b3b;
  --color-danger-soft: #fdeeee;
  --color-info: #2b6cb0;
  --color-info-soft: #e8f1fb;
  --color-info-text: #1a4f86;
  --color-info-border: #9ec3ea;
  --color-warning-text: #7a4b09;
  --color-warning-border: #efc98a;
  --color-warning-active: #8a5608;
  --color-warning-active-contrast: #ffffff;
  --color-success-text: #146636;
  --color-success-border: #9ed4b4;
  --color-danger-text: #9b2c2c;
  --color-danger-border: #efb0b0;

  /* Primary action alias — change --color-teal to recolor buttons site-wide */
  --color-primary: var(--color-teal);
  --color-primary-hover: var(--color-teal-hover);
  --color-primary-contrast: #ffffff;
  --color-accent: var(--color-teal);
  --color-warning-btn: #8a5608;
  --color-warning-btn-contrast: #ffffff;

  /* Glass chrome. Inputs and tables stay on --color-surface. */
  --color-glass: rgba(255, 255, 255, 0.72);
  --color-glass-border: rgba(255, 255, 255, 0.88);
  --color-sidebar-glass: rgba(11, 56, 83, 0.92);
  --page-gradient: linear-gradient(180deg, #e7f1f4 0%, var(--color-bg) 240px);
  --login-gradient: linear-gradient(145deg, #d5e8ee 0%, #f5f8fa 42%, #e4eaf3 100%);
  --color-login-orb: rgba(14, 124, 134, 0.22);

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(11, 56, 83, 0.06);
  --shadow: 0 8px 24px rgba(11, 56, 83, 0.06);

  /* Layout */
  --header-height: 64px;
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 72px;
  --content-pad: 20px;

  /* Type */
  --font-sans: "Inter", "Segoe UI", Tahoma, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;
  --font-size: 16px;
  --line-height: 1.45;
}

/* Midnight — dark glass, light text */
html[data-theme="midnight"] {
  --color-navy: #07131c;
  --color-navy-mid: #102433;
  --color-navy-hover: #1a3648;
  --color-teal: #3ec4ce;
  --color-teal-hover: #2aa3ad;
  --color-teal-soft: rgba(62, 196, 206, 0.16);
  --color-teal-muted: rgba(62, 196, 206, 0.28);
  --color-bg: #0c1822;
  --color-surface: #152838;
  --color-header: rgba(12, 24, 34, 0.78);
  --color-sidebar: #07131c;
  --color-sidebar-text: rgba(255, 255, 255, 0.78);
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-active: #1a3648;
  --color-text: #e7eef4;
  --color-text-muted: #9aafbf;
  --color-text-on-dark: #ffffff;
  --color-heading: #f4f8fb;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-focus: #3ec4ce;
  --color-success: #3dbe74;
  --color-success-soft: rgba(61, 190, 116, 0.18);
  --color-success-text: #b6f0cf;
  --color-success-border: rgba(61, 190, 116, 0.45);
  --color-warning: #e0a045;
  --color-warning-soft: rgba(224, 160, 69, 0.18);
  --color-warning-text: #f3d7a4;
  --color-warning-border: rgba(224, 160, 69, 0.45);
  --color-warning-active: #e0a045;
  --color-warning-active-contrast: #2a1c06;
  --color-danger: #e06a6a;
  --color-danger-soft: rgba(224, 106, 106, 0.18);
  --color-danger-text: #f6c2c2;
  --color-danger-border: rgba(224, 106, 106, 0.45);
  --color-info: #7eb6ea;
  --color-info-soft: rgba(126, 182, 234, 0.18);
  --color-info-text: #d3e6fa;
  --color-info-border: rgba(126, 182, 234, 0.45);
  --color-primary: #3ec4ce;
  --color-primary-hover: #2aa3ad;
  --color-primary-contrast: #042226;
  --color-accent: #3ec4ce;
  --color-warning-btn: #e0a045;
  --color-warning-btn-contrast: #2a1c06;
  --color-glass: rgba(16, 36, 50, 0.72);
  --color-glass-border: rgba(255, 255, 255, 0.14);
  --color-sidebar-glass: rgba(7, 19, 28, 0.9);
  --page-gradient: linear-gradient(180deg, #102838 0%, var(--color-bg) 280px);
  --login-gradient: linear-gradient(145deg, #07131c 0%, #123844 48%, #0c1822 100%);
  --color-login-orb: rgba(62, 196, 206, 0.28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Sand — warm paper, deep green actions */
html[data-theme="sand"] {
  --color-navy: #3d3428;
  --color-navy-mid: #534737;
  --color-navy-hover: #6a5b46;
  --color-teal: #1f6b4a;
  --color-teal-hover: #18563b;
  --color-teal-soft: #e7f4ec;
  --color-teal-muted: #d5ebdf;
  --color-bg: #f6f1e8;
  --color-surface: #fffdf8;
  --color-header: #fffdf8;
  --color-sidebar: #3d3428;
  --color-sidebar-text: rgba(255, 248, 240, 0.8);
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-active: #6a5b46;
  --color-text: #2c261f;
  --color-text-muted: #6f655a;
  --color-heading: #2a241c;
  --color-border: #e6dccb;
  --color-border-strong: #d4c6ae;
  --color-focus: #1f6b4a;
  --color-success: #1f6b4a;
  --color-success-soft: #e7f4ec;
  --color-success-text: #145238;
  --color-success-border: #b7dcc8;
  --color-warning: #a15c09;
  --color-warning-soft: #fff1dc;
  --color-warning-text: #7a4508;
  --color-warning-border: #efd0a4;
  --color-warning-active: #7a4508;
  --color-warning-active-contrast: #ffffff;
  --color-danger: #a33b3b;
  --color-danger-soft: #fdeeee;
  --color-danger-text: #8a2e2e;
  --color-danger-border: #efc2c2;
  --color-info: #2f5f86;
  --color-info-soft: #e7f0f7;
  --color-info-text: #1d4568;
  --color-info-border: #c5d7e6;
  --color-primary: #1f6b4a;
  --color-primary-hover: #18563b;
  --color-primary-contrast: #ffffff;
  --color-accent: #1f6b4a;
  --color-warning-btn: #7a4508;
  --color-warning-btn-contrast: #ffffff;
  --color-glass: rgba(255, 252, 246, 0.74);
  --color-glass-border: rgba(255, 255, 255, 0.9);
  --color-sidebar-glass: rgba(61, 52, 40, 0.92);
  --page-gradient: linear-gradient(180deg, #f3e6d4 0%, var(--color-bg) 240px);
  --login-gradient: linear-gradient(145deg, #f3e6d4 0%, #f6f1e8 46%, #e7efe8 100%);
  --color-login-orb: rgba(31, 107, 74, 0.2);
  --shadow-sm: 0 1px 2px rgba(61, 52, 40, 0.06);
  --shadow: 0 8px 24px rgba(61, 52, 40, 0.08);
}