/* =========================================================
   HT Health Theme Tokens RS04
   Layer: tokens
   Scope: root + Bootstrap/Tailwind-compatible CSS variables
========================================================= */
:root {
  color-scheme: light;

  --color-primary: #0f766e;
  --color-primary-strong: #115e59;
  --color-primary-soft: #d8f5ef;
  --color-secondary: #315f7c;
  --color-accent: #c27a23;
  --color-success: #147a4f;
  --color-warning: #b76e00;
  --color-danger: #b42318;
  --color-info: #0b6aa8;

  --color-bg: #f4f7f8;
  --color-bg-elevated: #edf3f5;
  --color-surface: #ffffff;
  --color-surface-muted: #f7fafb;
  --color-surface-raised: #ffffff;
  --color-border: #d8e2e7;
  --color-border-strong: #b7c7d1;
  --color-text: #10202f;
  --color-text-muted: #607284;
  --color-text-subtle: #7a8b9b;
  --color-link: #0f766e;
  --color-focus: rgba(15, 118, 110, 0.24);

  --color-success-bg: #e8f7ef;
  --color-warning-bg: #fff3d6;
  --color-danger-bg: #ffebe8;
  --color-info-bg: #e7f4fb;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 22px 54px rgba(15, 23, 42, 0.14);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --font-size-xs: 0.78rem;
  --font-size-sm: 0.88rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.35rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: clamp(1.9rem, 4vw, 2.5rem);

  --line-height-tight: 1.2;
  --line-height-base: 1.58;
  --line-height-loose: 1.75;

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1055;
  --z-toast: 1080;
  --z-theme-switcher: 1090;

  --touch-target: 44px;
  --content-max: 1160px;
  --mobile-nav-height: 72px;

  /* Backward-compatible tokens used by existing views. */
  --brand: var(--color-primary);
  --brand-600: var(--color-primary);
  --brand-700: var(--color-primary-strong);
  --brand-soft: var(--color-primary-soft);
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-muted);
  --surface-3: var(--color-bg-elevated);
  --border: var(--color-border);
  --border-soft: color-mix(in srgb, var(--color-border) 72%, transparent);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);

  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-bg: var(--color-surface-muted);
  --bs-primary: var(--color-primary);
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-info: var(--color-info);
}

html[data-color-scheme="dark"] {
  color-scheme: dark;

  --color-primary: #3cc7b6;
  --color-primary-strong: #85ddd4;
  --color-primary-soft: rgba(60, 199, 182, 0.14);
  --color-secondary: #8eb6d8;
  --color-accent: #d9a65a;
  --color-success: #58d69a;
  --color-warning: #f0bf61;
  --color-danger: #ff9a86;
  --color-info: #6fc8f2;

  --color-bg: #0b1421;
  --color-bg-elevated: #101d2e;
  --color-surface: #121f31;
  --color-surface-muted: #17263a;
  --color-surface-raised: #18293f;
  --color-border: #2a3a50;
  --color-border-strong: #40536c;
  --color-text: #eaf1f8;
  --color-text-muted: #a9b7c6;
  --color-text-subtle: #8393a6;
  --color-link: #85ddd4;
  --color-focus: rgba(60, 199, 182, 0.34);

  --color-success-bg: rgba(88, 214, 154, 0.14);
  --color-warning-bg: rgba(240, 191, 97, 0.16);
  --color-danger-bg: rgba(255, 154, 134, 0.16);
  --color-info-bg: rgba(111, 200, 242, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 12px 30px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.46);

  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-bg: var(--color-surface-muted);
}