/* Presora design tokens — shared by the public site (Tailwind CDN) and the doctor area (Bootstrap 5). */
:root {
  /* Brand (teal). RGB triplets so Tailwind can apply alpha: rgb(var(--brand-600) / 0.1) */
  --brand-50: 240 253 250;
  --brand-100: 204 251 241;
  --brand-200: 153 246 228;
  --brand-500: 20 184 166;
  --brand-600: 15 118 110;
  --brand-700: 17 94 89;
  --brand-800: 19 78 74;

  /* Ink (slate) */
  --ink-900: 15 23 42;
  --ink-700: 51 65 85;
  --ink-500: 100 116 139;
  --ink-400: 148 163 184;
  --ink-300: 203 213 225;

  /* Surfaces */
  --surface: 255 255 255;
  --surface-muted: 246 248 250;
  --line: 226 232 240;
  --line-strong: 203 213 225;

  /* Semantic */
  --success: 22 163 74;
  --warning: 217 119 6;
  --danger: 220 38 38;
  --info: 37 99 235;

  /* Hex mirrors for Bootstrap and inline SVG */
  --brand-hex: #0F766E;
  --brand-hover-hex: #115E59;
  --brand-active-hex: #134E4A;
  --brand-soft-hex: #F0FDFA;
  --brand-100-hex: #CCFBF1;
  --brand-200-hex: #99F6E4;
  --ink-900-hex: #0F172A;
  --ink-700-hex: #334155;
  --ink-500-hex: #64748B;
  --ink-400-hex: #94A3B8;
  --surface-hex: #FFFFFF;
  --surface-muted-hex: #F6F8FA;
  --line-hex: #E2E8F0;
  --success-hex: #16A34A;
  --warning-hex: #D97706;
  --danger-hex: #DC2626;
  --info-hex: #2563EB;

  /* Categorical chart series — teal-led, distinguishable at 8 steps.
     Consumed by doctor/js/research.js via getComputedStyle. */
  --chart-1-hex: #0F766E;
  --chart-2-hex: #D97706;
  --chart-3-hex: #2563EB;
  --chart-4-hex: #DB2777;
  --chart-5-hex: #7C3AED;
  --chart-6-hex: #0891B2;
  --chart-7-hex: #65A30D;
  --chart-8-hex: #DC2626;
  --gender-female-hex: #DB2777;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-bn: 'SolaimanLipi', var(--font-sans);

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgb(15 23 42 / .04);
  --sh-sm: 0 1px 3px rgb(15 23 42 / .06), 0 1px 2px rgb(15 23 42 / .04);
  --sh-md: 0 4px 12px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .04);
  --sh-lg: 0 12px 32px rgb(15 23 42 / .08), 0 2px 6px rgb(15 23 42 / .04);
}

/* Brand logo component (framework-agnostic) */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  user-select: none;
  line-height: 1;
}
.brand-logo svg { flex: none; display: block; }
.brand-logo__text {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-900-hex);
  font-size: 1.125rem;
}
.brand-logo--light .brand-logo__text { color: #fff; }