/* HistoSuite marketing site — brand tokens from the HistoSuite UI Kit */
:root,
[data-theme="histosuite"] {
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #f8fafc;
  --color-base-300: #e2e8f0;
  --color-base-content: #0f172a;
  --color-primary: #0ea5e9;
  --color-primary-content: #ffffff;
  --color-secondary: #0f172a;
  --color-secondary-content: #f8fafc;
  --color-accent: #14b8a6;
  --color-accent-content: #042f2e;
  --color-neutral: #334155;
  --color-neutral-content: #f8fafc;
  --color-info: #0284c7;
  --color-info-content: #f0f9ff;
  --color-success: #059669;
  --color-success-content: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-content: #fffbeb;
  --color-error: #dc2626;
  --color-error-content: #fef2f2;
  --radius-selector: 0.35rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --hs-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --hs-ink: #0f172a;
  --hs-muted: #475569;
}

[data-theme="histosuite-dark"] {
  color-scheme: dark;
  --color-base-100: #0f172a;
  --color-base-200: #1e293b;
  --color-base-300: #334155;
  --color-base-content: #f1f5f9;
  --color-primary: #38bdf8;
  --color-primary-content: #0c4a6e;
  --color-secondary: #e2e8f0;
  --color-secondary-content: #0f172a;
  --color-accent: #2dd4bf;
  --color-accent-content: #134e4a;
  --color-neutral: #cbd5e1;
  --color-neutral-content: #0f172a;
  --color-info: #38bdf8;
  --color-info-content: #0c4a6e;
  --color-success: #34d399;
  --color-success-content: #064e3b;
  --color-warning: #fbbf24;
  --color-warning-content: #78350f;
  --color-error: #f87171;
  --color-error-content: #7f1d1d;
  --hs-ink: #f8fafc;
  --hs-muted: #94a3b8;
}

html {
  font-family: var(--hs-font);
  scroll-behavior: smooth;
}

body {
  font-family: var(--hs-font);
  background: var(--color-base-200);
  color: var(--color-base-content);
  min-height: 100vh;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hs-skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  border-radius: 0.5rem;
  background: var(--color-primary);
  color: var(--color-primary-content);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}

.hs-skip-link:focus {
  top: 1rem;
}

.hs-app-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  color: #fff;
  flex-shrink: 0;
}

.hs-status,
.hs-priority {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.hs-status::before,
.hs-priority::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
}

.hs-status[data-status="received"],
.hs-status[data-status="new"] {
  color: #0369a1;
  background: #e0f2fe;
}

.hs-status[data-status="in-progress"],
.hs-status[data-status="processing"] {
  color: #1d4ed8;
  background: #dbeafe;
}

.hs-status[data-status="pending"],
.hs-status[data-status="on-hold"] {
  color: #b45309;
  background: #fef3c7;
}

.hs-status[data-status="complete"],
.hs-status[data-status="completed"],
.hs-status[data-status="ready"] {
  color: #047857;
  background: #d1fae5;
}

.hs-priority[data-priority="stat"] {
  color: #991b1b;
  background: #fee2e2;
}

.hs-priority[data-priority="urgent"] {
  color: #c2410c;
  background: #ffedd5;
}

.hs-priority[data-priority="routine"] {
  color: #1d4ed8;
  background: #dbeafe;
}

[data-theme="histosuite-dark"] .hs-status[data-status="received"],
[data-theme="histosuite-dark"] .hs-status[data-status="new"] {
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.16);
}

[data-theme="histosuite-dark"] .hs-status[data-status="in-progress"] {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.2);
}

[data-theme="histosuite-dark"] .hs-status[data-status="pending"] {
  color: #fcd34d;
  background: rgba(217, 119, 6, 0.18);
}

[data-theme="histosuite-dark"] .hs-status[data-status="complete"] {
  color: #6ee7b7;
  background: rgba(5, 150, 105, 0.18);
}

.hs-stat {
  border: 1px solid var(--color-base-300);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}