/* =========================================================================
   Marlo Design System — Foundations
   Care home management platform. Mobile-first for care staff; Filament-based
   admin for managers. Tone: calm, trustworthy, clinical-but-warm.
   ========================================================================= */

/* ---------- Type ---------- */
/* MARLO TYPE SYSTEM
   ----------------
   We pair a humanist serif (warmth, trust, "well-run home") with an
   accessibility-first sans (workhorse for body, UI, labels, numerics).
   Both are free, libre, and on Google Fonts.

   1. Display — Newsreader (Production Type, OFL).
      Used sparingly: resident-name hero cards, splash, screen titles,
      big numeric readouts, empty-state headlines. Warm transitional
      serif drawn for screens; quietly distinctive; not twee.

   2. UI — Public Sans (US Web Design System, OFL).
      Body, buttons, nav, lists, form labels. Designed for accessibility
      (high x-height, open apertures, tabular figures); reads cleanly at
      14–17px on phones in variable lighting.

   3. Numeric/log — Public Sans with `tabular-nums`.
      Times, doses, room numbers, vitals. (No separate mono.)

   Load in each HTML file:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Public+Sans:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
*/

:root {
  --font-sans:    "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Roboto Mono", monospace;

  /* ---------- Type scale (mobile-first, large for arm's-length glances) ---------- */
  /* Base body sits at 17px on mobile — older eyes, gloved hands, end-of-shift fatigue. */
  --text-xs:   12px;   /* timestamps, meta only — never primary content */
  --text-sm:   14px;   /* secondary labels */
  --text-md:   17px;   /* body, default */
  --text-lg:   19px;   /* card titles, list items */
  --text-xl:   22px;   /* resident name on card, screen titles */
  --text-2xl:  28px;   /* big numerics (vitals, time) */
  --text-3xl:  34px;   /* hero numerics, NFC scan state */
  --text-4xl:  44px;   /* admin dashboard stats */

  --leading-tight:  1.15;
  --leading-snug:   1.30;
  --leading-normal: 1.45;
  --leading-loose:  1.60;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;     /* eyebrow / section labels */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Color: Neutrals (warm, not cool) ---------- */
  /* Stone-leaning greys keep the "well-run home" feel — not hospital cool-grey. */
  --stone-50:  #FAF7F2;   /* page background */
  --stone-100: #F3EFE7;   /* subtle surface, hover */
  --stone-200: #E6E0D4;   /* borders, dividers */
  --stone-300: #D2CABA;   /* disabled bg, skeletons */
  --stone-400: #A39B8A;   /* placeholder text */
  --stone-500: #76705F;   /* secondary text */
  --stone-600: #585442;   /* body text on light */
  --stone-700: #3F3D31;   /* headings */
  --stone-800: #2A2920;   /* near-black */
  --stone-900: #1A1914;   /* maximum contrast */

  /* ---------- Color: Primary — "Marlo Teal" ---------- */
  /* Deep desaturated teal. Reads as competent + calm. AAA on white at 600+. */
  --teal-50:  #EEF6F4;
  --teal-100: #D6E9E4;
  --teal-200: #A8D2C8;
  --teal-300: #75B4A7;
  --teal-400: #4A9485;
  --teal-500: #2F7A6B;
  --teal-600: #245F54;   /* PRIMARY — buttons, links, focus */
  --teal-700: #1B4A41;   /* primary pressed */
  --teal-800: #143731;
  --teal-900: #0E2622;

  /* ---------- Color: Accent — "Care Apricot" ---------- */
  /* Warm, human counterpoint. Used sparingly: highlights, illustration, empty states. */
  --apricot-50:  #FBF1E8;
  --apricot-100: #F6DDC4;
  --apricot-200: #EDBE92;
  --apricot-300: #E29E63;
  --apricot-400: #D38545;
  --apricot-500: #B86E32;
  --apricot-600: #944F22;

  /* ---------- Color: Semantics ---------- */
  /* Tuned to feel calm, never alarmist. AA on white for the 600-step. */
  --success-50:  #ECF5EC;
  --success-100: #D2E8D2;
  --success-500: #3D8A4D;
  --success-600: #2F6E3F;
  --success-700: #244F2F;

  --warning-50:  #FBF2DC;
  --warning-100: #F5E2B0;
  --warning-500: #B5821C;
  --warning-600: #8E6212;
  --warning-700: #6A480A;

  --danger-50:  #FBECE9;
  --danger-100: #F5D2CC;
  --danger-500: #C24B36;
  --danger-600: #9C3623;
  --danger-700: #762718;

  --info-50:  #E9F1F8;
  --info-100: #C8DCEE;
  --info-500: #3A6EA5;
  --info-600: #2A5482;
  --info-700: #1E3D60;

  /* ---------- Semantic role mappings (use these in components) ---------- */
  --bg-page:       var(--stone-50);
  --bg-surface:    #FFFFFF;
  --bg-raised:     #FFFFFF;
  --bg-sunken:     var(--stone-100);
  --bg-hover:      var(--stone-100);
  --bg-pressed:    var(--stone-200);

  --fg-default:    var(--stone-800);   /* body */
  --fg-muted:      var(--stone-500);   /* secondary */
  --fg-subtle:     var(--stone-400);   /* placeholder, meta */
  --fg-on-primary: #FFFFFF;
  --fg-heading:    var(--stone-900);
  --fg-link:       var(--teal-600);

  --border-subtle: var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong: var(--stone-500);
  --border-focus:  var(--teal-500);

  --primary:        var(--teal-600);
  --primary-hover:  var(--teal-700);
  --primary-press:  var(--teal-800);
  --primary-soft:   var(--teal-50);

  --success: var(--success-600);
  --warning: var(--warning-600);
  --danger:  var(--danger-600);
  --info:    var(--info-600);

  /* Status flag colors (resident concern, observation flag).
     Alarmist red is reserved for true emergencies; "concern" is amber. */
  --flag-concern: var(--warning-600);
  --flag-urgent:  var(--danger-600);
  --flag-info:    var(--info-600);
  --flag-positive:var(--success-600);

  /* ---------- Spacing scale (4px base, generous on mobile) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;

  /* Touch targets: WCAG AAA = 44px min. Marlo floor = 48px. Primary actions = 56px. */
  --tap-min:     44px;
  --tap-default: 48px;
  --tap-large:   56px;
  --tap-hero:    72px;   /* NFC scan, "log med" — designed for gloved thumbs */

  /* ---------- Radius ---------- */
  --radius-xs: 4px;    /* badges, chips */
  --radius-sm: 8px;    /* small buttons, inputs */
  --radius-md: 12px;   /* cards, sheets */
  --radius-lg: 18px;   /* hero cards, modals */
  --radius-xl: 24px;   /* full-screen sheets */
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  /* Soft, low-contrast shadows. Calm, not floaty. */
  --shadow-xs: 0 1px 2px rgba(26, 25, 20, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 25, 20, 0.06), 0 1px 2px rgba(26, 25, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 25, 20, 0.06), 0 1px 3px rgba(26, 25, 20, 0.04);
  --shadow-lg: 0 12px 28px rgba(26, 25, 20, 0.10), 0 2px 6px rgba(26, 25, 20, 0.05);
  --shadow-xl: 0 24px 48px rgba(26, 25, 20, 0.14), 0 4px 12px rgba(26, 25, 20, 0.06);
  --shadow-focus: 0 0 0 3px rgba(36, 95, 84, 0.32);   /* teal-600 @ 32% */

  /* ---------- Motion ---------- */
  /* Calm, never showy. Short durations + ease-out. No bounces, no overshoot. */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.30, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

/* ---------- Dark mode (night-shift) ---------- */
/* Triggered via .dark on root or @media (prefers-color-scheme: dark). */
:root.dark, [data-theme="dark"] {
  --bg-page:       #15171A;
  --bg-surface:    #1B1E22;
  --bg-raised:     #232730;
  --bg-sunken:     #121316;
  --bg-hover:      #2A2E37;
  --bg-pressed:    #353B45;

  --fg-default:    #E8E5DC;
  --fg-muted:      #A6A293;
  --fg-subtle:     #7C7868;
  --fg-heading:    #F5F2E9;
  --fg-link:       var(--teal-300);

  --border-subtle: #2D3138;
  --border-default: #3A3F48;
  --border-strong: #54596A;

  --primary:       var(--teal-400);
  --primary-hover: var(--teal-300);
  --primary-press: var(--teal-200);
  --primary-soft:  rgba(74, 148, 133, 0.12);

  --success: #5BB36C;
  --warning: #E0A640;
  --danger:  #E16E5C;
  --info:    #6B9CD0;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.60);
}

/* =========================================================================
   Base + semantic typography classes
   ========================================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display {        /* hero numerics, splash, big moments */
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--fg-heading);
  font-optical-sizing: auto;
}
.t-h1 {              /* screen titles, resident name on hero */
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--fg-heading);
  font-optical-sizing: auto;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-heading);
  font-optical-sizing: auto;
}
.t-h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-heading);
}
.t-title {           /* card title, list-item primary */
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  color: var(--fg-heading);
}
.t-body {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-default);
}
.t-body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-default);
}
.t-meta {            /* timestamps, dosages, room numbers */
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.t-eyebrow {         /* section header above titles */
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--fg-muted);
}
.t-numeric {         /* time, vital readouts */
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}