/**
 * THERA — shared design tokens (single source of truth)
 * Load before page-specific CSS. Pages may add local overrides only when necessary.
 */
:root {
  --teal-50: #edf7f9;
  --teal-100: #d0edf3;
  --teal-300: #7fcce0;
  --teal-400: #55c0d8;
  --teal-500: #3dafc8;
  --teal-600: #2d94ab;
  --teal-700: #1f7a8c;
  --teal-800: #0b515f;
  --teal-900: #083c47;

  --sky-400: #60b9e0;
  --sky-500: #3da8d8;

  --soft-white: #fafcfe;
  --neutral-50: #f4f6f9;
  --neutral-100: #e8edf3;
  --neutral-200: #d4dce6;
  --neutral-300: #b8c4d0;
  --neutral-400: #9aa8b5;
  --neutral-500: #7a8a99;
  --neutral-600: #5a6a77;
  --neutral-700: #3a4a57;
  /* Between 700 and 900 — used for strong body text and UI affordances */
  --neutral-800: #2a3540;
  --neutral-900: #1a2530;

  --error-red: #e05555;
  --success-green: #3cc47c;
  --amber: #f0a844;

  --shadow-card: 0 24px 60px rgba(30, 80, 100, 0.1), 0 4px 16px rgba(30, 80, 100, 0.06);
  --shadow-input: 0 0 0 3px rgba(61, 175, 200, 0.18);
  --shadow-btn: 0 6px 20px rgba(61, 175, 200, 0.38);

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --topbar-h: 64px;
  --sidebar-w: 260px;

  --touch-min: 44px;
}

/* Global Utility: Ensure 'hidden' attribute always works regardless of display patterns */
[hidden] {
  display: none !important;
}

/**
 * Unified product mark — same raster asset everywhere (`images/logo.png`).
 * Dark accent plate behind the mark so light artwork stays readable on any bar.
 */
.thera-mark {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 3px;
  background: linear-gradient(
    155deg,
    var(--teal-900) 0%,
    var(--teal-800) 45%,
    #0a4a58 100%
  );
  box-shadow: 0 1px 3px rgba(8, 60, 71, 0.35);
}
.thera-mark--26,
.thera-mark--28 {
  padding: 2px;
  border-radius: 8px;
}
.thera-mark--26 { width: 26px; height: 26px; }
.thera-mark--28 { width: 28px; height: 28px; }
.thera-mark--30 { width: 30px; height: 30px; border-radius: 8px; }
.thera-mark--32 { width: 32px; height: 32px; border-radius: 8px; }
.thera-mark--34 { width: 34px; height: 34px; }
.thera-mark--36 { width: 36px; height: 36px; }
.thera-mark--40 { width: 40px; height: 40px; border-radius: 12px; padding: 4px; }