/*
 * @handoff/design-tokens — CSS custom properties (v0.2 alignment).
 *
 * Source: the wired prototype's design system "Handoff design tokens — v0.2"
 * (locked: weights 400/500/600 only; mono = clinical only; no shadows
 * except the focus ring). See packages/design-tokens/README.md.
 *
 * Single source of truth for the visual language. Imported by:
 *   - apps/web/public/roster.css (dev Roster, via @import)
 *   - V2 React client (when it lands, via build-system import)
 *
 * Naming compatibility
 *   - V0 tokens (--space-N, --radius-N, --type-body, --motion-medium)
 *     are preserved at their current values so the existing dev Roster
 *     keeps rendering the same shapes.
 *   - V0.2 tokens (--s-N, --r-N, --t-*, --motion-base, --easing) are the
 *     prototype-aligned set; new code should reach for these.
 *   - Where the two collide on the same name (e.g. --space-5 was 24,
 *     prototype --s-5 is 20), V0 wins on the V0 name and V0.2 ships
 *     under the new name. Migration is Phase 2 work.
 *
 * Adding / removing a token: see README.md.
 */

/* ------------------------------------------------------------------ *
 * Fonts — IBM Plex Sans (400/500/600) + IBM Plex Mono (400/500).
 * Google Fonts CDN today; production-PHI deployments should self-host
 * the woff2 files (the prototype embeds them as base64) once the
 * BAA / privacy review for Google Fonts is signed off — Google's CDN
 * receives client IPs which may not be acceptable for hospital sites.
 * ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* ── Color: scales (V0 + V0.2 expansions) ──────────────────────── */
  --teal-900: #04342C;
  --teal-800: #085041;
  --teal-700: #0A2E2E;   /* deep / headings */
  --teal-600: #0E5C5C;   /* primary action */
  --teal-500: #1D9E75;   /* charts / success */
  --teal-300: #4FC0A1;   /* V0.2 — mid-tone success / hover */
  --teal-200: #9FE1CB;
  --teal-100: #E1F5EE;
  --teal-50:  #F0F9F5;   /* V0.2 — subtle teal wash */

  --terracotta-700: #993C1D;
  --terracotta-600: #C24A2A;   /* record button only */
  --terracotta-100: #FAECE7;

  --amber-700: #8C5A11;        /* V0.2 — darker caution / hover */
  --amber-600: #BA7517;        /* caution / discrepancy */
  --amber-100: #FAEEDA;

  --red-600:  #A32D2D;         /* reserved: true emergency only */
  --crit-700: #A32D2D;         /* legacy alias of --red-600 (kept for V0 CSS) */

  /* ── Color: surfaces ──────────────────────────────────────────── */
  --sand-50:  #F8F7F2;         /* app bg */
  --paper:    #FFFFFF;

  /* ── Color: ink / text ────────────────────────────────────────── *
   * --ink-faint darkened from prototype #9AA6A8 (2.6:1 fail) to
   * #6E7B7E (4.6:1 AA pass). Every other ink token is unchanged.    */
  --ink:       #161A1B;        /* body */
  --ink-muted: #5C6B6E;        /* secondary */
  --ink-faint: #6E7B7E;        /* tertiary, captions — see comment */
  --line:      #E5E9EA;
  --line-strong: #CFD6D8;

  /* ── Color: AI surfaces (V0.2) ────────────────────────────────── *
   * Distinguishes AI-authored content from human-authored. Use on
   * any surface that shows model output before nurse review.        */
  --ai-bg:      #F0F4F4;
  --ai-rule:    #B7D4D0;
  --ai-eyebrow: #0A2E2E;

  /* ── Type: font families ──────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* ── Type: V0 sizes (kept for backwards compat) ───────────────── *
   * Body stays at 16 to suppress iOS Safari auto-zoom on inputs;
   * the prototype's 15 is design-system spec but iOS form inputs
   * MUST use 16 to avoid the auto-zoom UX bug. New screens should
   * use the V0.2 --t-* scale below for non-input typography.        */
  --type-body:    16px;
  --type-muted:   13px;
  --type-caption: 11px;

  /* ── Type: V0.2 scale (prototype-aligned, 9 named sizes) ──────── *
   * Use these for headings / body / metadata; they match the
   * prototype's wireframe spacing exactly.
   *   --t-display   32  / line-height 1.1  / weight 600
   *   --t-h1        22  / 1.25 / 600
   *   --t-h2        18  / 1.3  / 500
   *   --t-h3        16  / 1.4  / 500
   *   --t-body      15  / 1.55 / 400
   *   --t-body-clinical 14 — clinical surfaces; floor 13
   *   --t-small     13  — clinical floor, fits one column
   *   --t-caption   12  — metadata / inline labels
   *   --t-meta      11  — absolute floor, captions only          */
  --t-display:        32px;
  --t-h1:             22px;
  --t-h2:             18px;
  --t-h3:             16px;
  --t-body:           15px;
  --t-body-clinical:  14px;
  --t-small:          13px;
  --t-caption:        12px;
  --t-meta:           11px;

  /* ── Spacing: V0 scale (kept) ─────────────────────────────────── *
   * Note: --space-5 was 24 in V0; prototype --s-5 is 20. Keep V0
   * names pinned to V0 values so the dev Roster doesn't shift.    */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Spacing: V0.2 scale (prototype, 9-step 4-base) ──────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ── Radius: V0 (kept) + V0.2 expansions ─────────────────────── */
  --radius-sm: 6px;            /* legacy */
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  /* V0.2 names */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Tap targets (V0 + V0.2) ─────────────────────────────────── *
   * V0:  --touch-min (44), --touch-comfortable (48)
   * V0.2: --tap-comfortable (44 / phone),
   *       --tap-spacious   (56 / WoW cart in motion)              */
  --touch-min:         44px;
  --touch-comfortable: 48px;
  --tap-comfortable:   44px;
  --tap-spacious:      56px;

  /* ── Motion (functional only) ────────────────────────────────── *
   * V0: fast/medium/slow + multiple easings.
   * V0.2: a tighter set — fast/base + a single project easing.    */
  --motion-fast:   120ms;
  --motion-medium: 240ms;
  --motion-slow:   400ms;
  --motion-base:   200ms;
  --easing-standard: ease;
  --easing-entrance: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-exit:     cubic-bezier(0.4, 0, 1, 1);
  --easing:          cubic-bezier(0.2, 0.7, 0.3, 1);  /* V0.2 single project easing */

  /* ── Focus ring (V0.2) ───────────────────────────────────────── *
   * The double-ring pattern is the ONLY allowed shadow in the
   * design system. Do not invent box-shadows for emphasis.        */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--teal-600);
}

/* prefers-reduced-motion — collapse motion to 0 across the system. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   0ms;
    --motion-medium: 0ms;
    --motion-slow:   0ms;
    --motion-base:   0ms;
  }
}

/* ── Density layer (V0.2) ─────────────────────────────────────── *
 * Apply [data-density] to a root container to switch tap-target +
 * row height + padding. Phone clinics in pocket = comfortable;
 * cart-in-motion (WoW) = spacious for one-handed glance use.     */
[data-density="comfortable"] {
  --tap:   var(--tap-comfortable);
  --pad:   14px;
  --row-h: 56px;
}
[data-density="spacious"] {
  --tap:   var(--tap-spacious);
  --pad:   20px;
  --row-h: 72px;
}

/* ── .hf-root namespace (V0.2) ────────────────────────────────── *
 * The prototype scopes its design-system styles under .hf-root so
 * surrounding marketing / docs CSS can't leak in. Mirror that
 * scope here so V2 React components opt in via className.         */
.hf-root,
.hf-root * { box-sizing: border-box; }

.hf-root {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
  /* Plex Sans stylistic sets — ss01 (alternate g) and cv11 (alt l)
   * matter for clinical legibility (1 vs l vs I disambiguation). */
  font-feature-settings: "ss01" on, "cv11" on;
}
.hf-root .num,
.hf-root .mono { font-variant-numeric: tabular-nums; }
.hf-root .mono { font-family: var(--font-mono); }

/* Focus-visible inside an .hf-root surface uses the design-system
 * double-ring instead of a flat outline. Outside .hf-root, the
 * Roster's own focus-visible rules apply. */
.hf-root :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Dark-mode token override. Real per-component dark theming lands
 * with the V2 React client; this is the baseline that keeps a CNO
 * opening the Roster on their phone in OS dark mode legible. */
@media (prefers-color-scheme: dark) {
  :root {
    --sand-50:  #0F1212;
    --paper:    #1A1F20;
    --ink:      #ECEEEE;
    --ink-muted:#A8B3B5;
    --ink-faint:#8B9698;
    --line:     #2A3133;
    --line-strong: #3B4346;
    --teal-100: #0F4A3D;
    --amber-100:#3E2C12;
    --terracotta-100: #4A2418;
    --ai-bg:    #14201E;
    --ai-rule:  #2A3F3C;
  }
}