/**
 * Design tokens — Jagriti InnoHealth.
 *
 * Modern healthtech: teal/cyan brand, generous space, soft elevation, rounded
 * geometry. Evolves the brand production already had rather than replacing it.
 *
 * The `.band` block at the bottom re-maps this contract for dark sections, so a
 * single card component renders light on /platforms and dark inside a homepage
 * band with no template fork and no variant class.
 */

:root {
  /* Brand */
  --brand: #0E7490;          /* deep teal — primary actions, links */
  --brand-bright: #0891B2;   /* cyan-600 */
  --brand-glow: #22D3EE;     /* cyan-400 — accents on dark */
  --mint: #14B8A6;
  /* Darkened from a brighter #EA7A3C: that measured 2.56:1 on --warm-soft and
     carries the card tag text ("Flagship", "Clinical trial"). #B34E12 is 4.68:1. */
  --warm: #B34E12;           /* tags */
  --warm-soft: #FDF0E7;

  /* Surfaces */
  --bg: #F7FAFC;
  --bg-soft: #EEF4F7;
  --paper: #FFFFFF;
  --paper-2: #FFFFFF;

  /* Ink — all AA-verified against --bg and --paper */
  --ink: #0C1E2B;
  --ink-soft: #47606F;
  --ink-faint: #5D7686;

  --line: #DDE7EC;
  --line-soft: #EAF1F4;

  /* Dark bands — the alternating dark section is a deliberate design device (a
     dark band inside an otherwise light page), not a dark-mode artefact. */
  --band-bg: #07202E;
  --band-bg2: #0C2B3C;
  --band-card: #103546;
  --band-ink: #F2F8FA;
  --band-ink-soft: #9FBECD;
  --band-accent: #38D9EF;
  --band-warm: #FFB68A;
  --band-line: rgba(226, 244, 250, 0.13);

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Elevation — soft, layered, never muddy */
  --sh-1: 0 1px 2px rgba(12, 30, 43, 0.04), 0 2px 8px rgba(12, 30, 43, 0.04);
  --sh-2: 0 2px 4px rgba(12, 30, 43, 0.04), 0 12px 28px -8px rgba(12, 30, 43, 0.10);
  --sh-3: 0 8px 16px rgba(12, 30, 43, 0.06), 0 24px 48px -12px rgba(12, 30, 43, 0.16);
  --sh-brand: 0 8px 24px -6px rgba(14, 116, 144, 0.35);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --section-y: clamp(4.5rem, 7vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/**
 * The band re-map. Components resolve --paper / --ink / --line and nothing else,
 * so dropping the same card inside a .band inverts it through the cascade.
 * Never write `.band .card {…}` overrides, and never fork a card template.
 */
.band {
  --bg: var(--band-bg);
  --bg-soft: var(--band-bg2);
  --paper: var(--band-card);
  --paper-2: var(--band-bg2);
  --ink: var(--band-ink);
  --ink-soft: var(--band-ink-soft);
  --ink-faint: var(--band-ink-soft);
  --line: var(--band-line);
  --line-soft: var(--band-line);
  --brand: var(--band-accent);
  --brand-bright: var(--band-accent);
  --warm: var(--band-warm);
  --warm-soft: rgba(255, 182, 138, 0.12);
  --sh-1: none;
  --sh-2: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
  --sh-3: 0 24px 48px -14px rgba(0, 0, 0, 0.6);

  background: var(--band-bg);
  color: var(--band-ink);
}

.band--alt {
  --bg: var(--band-bg2);
  background: var(--band-bg2);
}