/* #region zone:health.mono.tokens — โทเค็น สี ตัวอักษร และสถานะ control ของหน้า Health ขาวดำ */
@font-face {
  font-family: 'Anuphan Health';
  src: url('/health/fonts/Anuphan.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Health';
  src: url('/health/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono Health';
  src: url('/health/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

html:root {
  --accent: var(--mono-ink);
  --accent-text: var(--mono-ink);
  --accent-hover: #2a2a2a;
  --on-accent: var(--mono-bg);
  --acc-soft: var(--mono-card-2);
  --accent-grad: var(--mono-ink);
  --hero-grad: linear-gradient(125deg, #1d55c4 0%, #2563eb 62%, #2f6fe0 100%);
  --on-hero: #ffffff;
  --accent-glow: 0 6px 16px -6px rgba(29, 95, 209, 0.55);
  --wash: rgba(37, 99, 235, 0.07);
  --health-sky: #eef3fb;
  --health-sky-text: #1f3f73;
  --bg: var(--mono-bg);
  --panel: var(--mono-card);
  --panel2: var(--mono-card-2);
  --line: var(--mono-faint);
  --line-strong: var(--mono-ink);
  --hover: var(--mono-card-2);
  --text: var(--mono-ink);
  --muted: var(--mono-muted);
  --field: var(--mono-bg);
  --ok-text: #0b6b46;
  --ok-soft: #e4f4ec;
  --warn-text: #84560a;
  --warn-soft: #fdf2d9;
  --danger-text: #a7222d;
  --danger-soft: #fce8ea;
  --card-shadow: none;
  --lift-shadow: none;
  --shadow: var(--mono-shadow);
  --scrim: rgba(0, 0, 0, 0.5);
  --target: 44px;
  --r-card: 32px;
  --r-inner: 20px;
  --r-control: 16px;
  --side-w: 256px;
  --rail-w: 76px;
  --page-w: 1440px;
  --font-sans: 'Geist Health', 'Anuphan Health', 'Noto Sans Thai Looped', system-ui, sans-serif;
  --mono-bg: var(--u-page);
  --mono-card: var(--u-card);
  --mono-card-2: var(--u-card-2);
  --mono-ink: #000000;
  --mono-muted: #6b6b6b;
  --mono-faint: var(--u-border);
  --mono-pop: var(--u-sheet);
  --mono-hard: #000000;
  --mono-on-hard: #ffffff;
  --mono-soft-on-hard: #9a9a9a;
  --mono-glass: var(--u-glass);
  --mono-green: #12a150;
  --mono-amber: #f0a800;
  --mono-red: #e5341f;
  --mono-blue: #1f6bff;
  --mono-orange: #ff5c00;
  --mono-cyan: #00a8c8;
  --mono-violet: #6e4bff;
  --mono-focus: #1f6bff;
  --mono-shadow: var(--u-shadow);
  color-scheme: light;
}

html:root[data-theme='dark'] {
  --accent: #2f6fe4;
  --accent-text: #8db8ff;
  --accent-hover: #d6d6d6;
  --acc-soft: rgba(76, 141, 255, 0.16);
  --accent-grad: linear-gradient(135deg, #2f6fe4 0%, #2559c4 100%);
  --hero-grad: linear-gradient(125deg, #173c84 0%, #1d4fae 60%, #2458bd 100%);
  --accent-glow: 0 6px 18px -8px rgba(47, 111, 228, 0.7);
  --wash: rgba(76, 141, 255, 0.08);
  --health-sky: #16202e;
  --health-sky-text: #b9d2fb;
  --bg: #0c1118;
  --panel: #141a23;
  --panel2: #1a212c;
  --line: #263040;
  --line-strong: #364256;
  --hover: #1d2531;
  --text: #e9eef5;
  --muted: #a9b5c4;
  --field: #10161e;
  --ok-text: #6fd3a3;
  --ok-soft: rgba(56, 194, 140, 0.14);
  --warn-text: #f1c35a;
  --warn-soft: rgba(240, 180, 41, 0.14);
  --danger-text: #ffb0b0;
  --danger-soft: rgba(255, 119, 116, 0.14);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --lift-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 32px -14px rgba(0, 0, 0, 0.7);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.62);
  --mono-bg: var(--u-page);
  --mono-card: var(--u-card);
  --mono-card-2: var(--u-card-2);
  --mono-ink: #ffffff;
  --mono-muted: #9a9a9a;
  --mono-faint: var(--u-border);
  --mono-pop: var(--u-sheet);
  --mono-hard: #161616;
  --mono-soft-on-hard: #8a8a8a;
  --mono-glass: var(--u-glass);
  --mono-green: #3ddc84;
  --mono-amber: #ffc94d;
  --mono-red: #ff6b5a;
  --mono-blue: #5b9bff;
  --mono-orange: #ff7a2e;
  --mono-cyan: #3fd4f0;
  --mono-violet: #9b85ff;
  --mono-focus: #5b9bff;
  --mono-shadow: var(--u-shadow);
  color-scheme: dark;
}

html:root body {
  min-width: 320px;
  background: var(--mono-bg);
  color: var(--mono-ink);
  font: var(--u-body)/1.55 var(--font-sans);
  letter-spacing: -0.01em;
}

html:root :where(h1, h2, h3, p) {
  margin-top: 0;
}

html:root :where(.stat-num, .big-input, .entry-value, .count, .mono-number) {
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: -0.05em;
}

html:root :where(.mono-eyebrow, .step-count, .summary-label, .tz-note, .field-label) {
  font-family: 'Geist Mono Health', 'Anuphan Health', ui-monospace, monospace;
  font-size: var(--u-text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html:root button[aria-busy='true'] .icon {
  animation: mono-spin 800ms linear infinite;
}

html:root button[data-done='true'] {
  background: var(--mono-green);
  color: #000000;
  animation: mono-done 1.2s ease both;
}

html:root :where(button, input, textarea, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mono-focus);
  outline-offset: 3px;
}

html:root .form-error {
  color: var(--mono-red);
}

@keyframes mono-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mono-done {
  0%,
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root *,
  html:root *::before,
  html:root *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* #endregion */