/* CSS tokens for Human in the Loop Systems — Calm Ink */
:root{
  color-scheme: light;
  --hi-base-ink:#0F1720;
  --hi-graphite:#28323A;
  --hi-porcelain:#F6F5F3;
  --hi-deep-teal:#0F7A72;
  --hi-mist:#E6EEF0;
  --hi-brass:#B07A4B;

  --hi-font-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hi-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --hi-space-xxs:4px;
  --hi-space-xs:8px;
  --hi-space-sm:12px;
  --hi-space-md:20px;
  --hi-space-lg:32px;
  --hi-space-xl:40px;
  --hi-radius:8px;

  /* Typography scale — use consistently across site */
  --hi-text-2xs: 0.8rem;
  --hi-text-xs: 0.85rem;
  --hi-text-sm: 0.95rem;
  --hi-text-base: 1.02rem;
  --hi-text-md: 1.08rem;
  --hi-text-lg: 1.15rem;
  --hi-text-xl: 1.25rem;
  --hi-text-2xl: 1.5rem;
  --hi-text-hero: clamp(2rem, 5vw, 3rem);
}

/* Example base styles */
body{font-family:var(--hi-font-body);color:var(--hi-base-ink);background:var(--hi-porcelain);line-height:1.5;}
h1,h2,h3{font-family:var(--hi-font-heading);color:var(--hi-base-ink);}
.btn-primary{background:var(--hi-deep-teal);color:white;padding:10px 16px;border-radius:6px;text-decoration:none;border:2px solid transparent}
.btn-ghost{background:transparent;color:var(--hi-base-ink);border:1px solid rgba(15,23,32,0.06);padding:8px 14px;border-radius:6px}
.card{background:white;border-radius:var(--hi-radius);padding:16px;box-shadow:0 1px 0 rgba(15,23,32,0.04)}