/* ==========================================================================
   TrainMed demonstration prototype — design tokens
   Every value below was measured from trainmed.io with getComputedStyle
   rather than eyeballed, so the prototype and the marketing site are the
   same design system and not two interpretations of one.
   ========================================================================== */

:root {
  /* --- Palette. Slate + sky, as measured on trainmed.io. ----------------- */
  --ink:        #0f172a;  /* headings, app chrome            slate-900 */
  --body:       #334155;  /* body copy                       slate-700 */
  --muted:      #64748b;  /* secondary, eyebrows             slate-500 */
  --faint:      #94a3b8;  /* metadata, timestamps            slate-400 */
  --rule:       #e2e8f0;  /* every border on the site        slate-200 */
  --rule-soft:  #eef2f7;  /* inner divisions                           */
  --wash:       #f8fafc;  /* alternating section ground      slate-50  */
  --white:      #ffffff;

  --accent:      #0369a1;  /* the one brand colour           sky-700 */
  --accent-deep: #075985;  /* hover                          sky-800 */
  --accent-lift: #0284c7;  /* highlights                     sky-600 */
  --accent-wash: rgba(3, 105, 161, 0.05);
  --accent-edge: rgba(3, 105, 161, 0.28);

  /* Governance states. Tailwind amber/red at the same step as the slate
     ramp above, so they sit in the palette rather than beside it. */
  --restrict:      #b45309;  /* off-label, restricted          amber-700 */
  --restrict-wash: #fffbeb;
  --restrict-edge: #fde68a;
  --alert:         #b91c1c;  /* complaint, quality event       red-700   */
  --alert-wash:    #fef2f2;
  --alert-edge:    #fecaca;
  --seeded:        #6d28d9;  /* seeded / constructed content violet-700 */
  --seeded-wash:   #f5f3ff;
  --seeded-edge:   #ddd6fe;

  /* --- Type. Inter throughout; headings sit at 500, never bold. --------- */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Tracking measured off the live site: -1.68px at 60px, -0.88px at 40px,
     -0.259px at 18.5px. Expressed in em so it scales with the step. */
  --track-display: -0.028em;
  --track-head:    -0.022em;
  --track-sub:     -0.014em;
  --track-eyebrow:  0.13em;   /* 1.495px at 11.5px, from their chat mock */

  /* --- Geometry. 3px everywhere. The site is deliberately sharp. -------- */
  --radius:    3px;
  --radius-lg: 4px;
  /* Message bubbles only. The system is 3px everywhere else; a bubble is the
     one element where a hard corner reads as a box rather than speech, so it
     gets a softened corner and keeps 3px on the corner nearest its author. */
  --radius-bubble: 10px;
  --shell:     1140px;

  /* Device bezel radii are physical, not brand — a phone is a real object
     and giving it a 3px corner would read as a mistake. */
  --device-outer: 46px;
  --device-inner: 32px;

  /* --- Depth. The site uses almost none; restraint is the brand. -------- */
  --lift-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --lift:    0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
  --lift-device:
    0 2px 6px rgba(15, 23, 42, 0.08),
    0 24px 48px -12px rgba(15, 23, 42, 0.18),
    0 64px 120px -40px rgba(15, 23, 42, 0.28);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}