/* siya — design tokens
   Plain CSS custom properties. No build step, no framework.
   Light is the base; dark is authored, not inverted. */

:root {
  /* surfaces & ink */
  --ground: #FBF6F6;
  --surface: #FFFFFF;
  --tint: #F7EDEE;
  --rule: #E9DADC;
  --soft: #9A8589;
  --ink: #2E2326;
  --ink-2: #6A575B;

  /* the one accent */
  --rose: #8C4A5B;
  --rose-deep: #5A2B38;
  --on-rose: #FDF8F8;

  /* status — always paired with an icon and a word */
  --ok: #3F5B45;
  --ok-bg: #EDF2ED;
  --ok-ink: #22331F;
  --warn: #7A5A1E;
  --warn-bg: #F7F0E4;
  --warn-ink: #3A2B0E;
  --err: #B03636;
  --err-bg: #F8EBEB;
  --err-ink: #3D1414;

  /* the rose scale, for anything the named tokens don't cover */
  --rose-50: #FDF8F8;
  --rose-100: #F7EDEE;
  --rose-200: #EFDDE0;
  --rose-300: #E1C2C8;
  --rose-400: #C99AA4;
  --rose-500: #B0737F;
  --rose-600: #8C4A5B;
  --rose-700: #74394A;
  --rose-800: #5A2B38;
  --rose-900: #3C1D26;
  --rose-950: #241417;

  /* warm neutrals, derived from the same hue */
  --n-0: #FFFFFF;
  --n-50: #FBF6F6;
  --n-100: #F3EDED;
  --n-200: #E9DADC;
  --n-300: #D6C3C6;
  --n-500: #9A8589;
  --n-600: #6A575B;
  --n-900: #2E2326;

  /* type */
  --font-display: "Literata", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-deva: "Noto Sans Devanagari", sans-serif;

  --t-display: 2rem;       /* 32px */
  --t-title: 1.5rem;       /* 24px */
  --t-lede: 1.1875rem;     /* 19px */
  --t-body: 1.0625rem;     /* 17px — never smaller for body */
  --t-meta: 0.875rem;      /* 14px */
  --t-label: 0.75rem;      /* 12px, uppercase, 0.14em */

  --lh-display: 1.15;
  --lh-title: 1.25;
  --lh-body: 1.65;
  --measure: 68ch;

  /* space, shape, targets */
  --space: 8px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --tap: 48px;

  --shadow-lift: 0 6px 20px rgba(46, 35, 38, 0.16);

  /* motion — slow, optional, meaningful */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;
}

@media (min-width: 48rem) {
  :root {
    --t-display: 2.75rem;  /* 44px */
    --t-title: 1.75rem;    /* 28px */
    --t-lede: 1.3125rem;   /* 21px */
  }
}

/* Dark only when the parent picks it with the Light / Dark switch (templates/_theme_head.html sets data-theme).
   A phone set to dark mode still gets light: Manuj's call, 15 Sep 2026. */
:root[data-theme="dark"] {
  --ground: #1B1416;
  --surface: #241B1E;
  --tint: #2E2326;
  --rule: #3D2E32;
  --soft: #8E787D;
  --ink: #F4E9EA;
  --ink-2: #C3AEB2;

  --rose: #E0A3B2;
  --rose-deep: #F0C4CE;
  --on-rose: #241417;

  --ok: #9CC1A2;
  --ok-bg: #22301F;
  --ok-ink: #F4E9EA;
  --warn: #E0B368;
  --warn-bg: #332815;
  --warn-ink: #F4E9EA;
  --err: #F0A6A6;
  --err-bg: #3A1D1D;
  --err-ink: #F4E9EA;

  --shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* base */
html {
  background: var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums; /* doses, dates and counts must not shift */
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  margin: 0;
}

:lang(hi) {
  font-family: var(--font-deva);
  line-height: 1.7;
}

a {
  color: var(--rose);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--rose-deep);
}

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

/* every interactive thing clears the tap target */
button,
[role="button"],
input,
select {
  min-height: var(--tap);
  font-family: inherit;
  font-size: var(--t-body);
}

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

/* print — the one-page brief goes out of a clinic printer in black and white */
@media print {
  :root {
    --ground: #FFFFFF;
    --surface: #FFFFFF;
    --tint: #F2F2F2;
    --rule: #BBBBBB;
    --ink: #000000;
    --ink-2: #333333;
    --rose: #737373;
    --on-rose: #FFFFFF;
  }
  body { font-size: 12pt; }
}