:root {
  /* Backgrounds */
  --bg-page: #F2F2F0;
  --bg-page-inner: #F7F6F4;
  --bg-card: #FFFFFF;
  --bg-card-warm: #FFFFFF;
  --bg-subtle: #F7F6F4;

  /* Borders */
  --border-warm: #E5E5E3;
  --border-cool: #E5E5E3;
  --border-width: 0.5px;

  /* Text */
  --text-primary: #0a0a0a;
  --text-body: #475569;
  --text-muted: #94a3b8;

  /* Accent — sage green (Levels-inspired) */
  --accent: #2D5F4F;
  --accent-hover: #1F4538;

  /* Status */
  --status-good: #10B981;
  --status-watch: #d97706;
  --status-concern: #dc2626;
  --status-info: #2D5F4F;

  /* Status — light variants for backgrounds */
  --status-good-bg: #ecfdf5;
  --status-watch-bg: #fffbeb;
  --status-concern-bg: #fef2f2;
  --status-info-bg: #f0f4f2;

  /* Typography */
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;

  --fs-h1: 2.5rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1rem;
  --fs-body: 0.9375rem;
  --fs-card: 0.875rem;
  --fs-label: 0.8125rem;
  --fs-eyebrow: 0.6875rem;
  --fs-caption: 0.75rem;

  --fw-heading: 600;
  --fw-medium: 500;
  --fw-body: 400;

  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-eyebrow: 0.08em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Section rhythm */
  --section-pad-y: 56px;
  --section-pad-y-tablet: 40px;
  --section-pad-y-mobile: 32px;

  /* No shadows */
  --shadow-none: none;

  /* Transitions */
  --transition-default: 150ms ease;
}

/* ===========================================================================
   The td- token set.

   MOVED HERE FROM today-redesign.css so one file serves both the patient app and
   the admin surface (ADMIN-HANDOFF §1: "the app's own light td- token system",
   "do not introduce a second set"). The values are unchanged and the .td-scope
   selector is kept, so these are still deliberately NOT global: nothing outside an
   element carrying .td-scope inherits a value from here, which was the original
   reason for scoping them.

   Both consumers load this file first. The six app pages load tokens.css before
   today-redesign.css; the admin loads tokens.css plus its own stylesheet and puts
   .td-scope on <body>. The admin does not load today-redesign.css, so none of its
   component CSS reaches admin markup.
   =========================================================================== */
.td-scope {
  /* --- Colors (HANDOFF §1) --- */
  --td-bg:            #FBFAF8;
  --td-surface:       #FFFFFF;
  --td-ink:           #1A1A18;
  --td-muted:         #5A5A52;
  --td-border:        #E6E3DC;
  --td-divider:       #EFECE6;
  --td-track:         #EDEAE3;
  --td-accent:        #2F6F62;
  --td-accent-tint:   #EFF4F2;
  --td-accent-light:  #8FB8AA;
  --td-circle-empty:  #B9B5AC;
  --td-chevron:       #8A867C;
  --td-on-ink-muted:  #C9C6BE;
  --td-chip-on-tint:  #C9D8D1;

  /* --- Supplements (SUPPLEMENTS-HANDOFF section 1). Scoped here rather than
     on :root so the supplement screens inherit one token set, not two. --- */
  --td-warn-bg:         #F5E7D8;
  --td-warn-text:       #3F2A17;
  --td-warn-icon:       #7A4E2E;
  --td-warn-pill-text:  #6B4225;
  --td-general-bg:      #F1EEE7;
  --td-general-text:    #4A4A43;
  --td-low:             #B4703A;
  --td-pill-green-bg:   #DCEBE4;
  --td-pill-green-text: #1F4F43;
  --td-pill-blue-bg:    #E4EEF4;
  --td-pill-blue-text:  #1F4F6F;

  /* CHECK-SUPPLEMENT-HANDOFF section 1. Deliberately the same values as the
     green pill: the spec names them separately because they mean something
     different (a verified product identity, an intake within its limit), and
     a later change to one should not silently move the other. */
  --td-verified-bg:     #DCEBE4;
  --td-verified-text:   #1F4F43;

  /* --- Fonts (HANDOFF §1) --- */
  --td-font-display: 'Fraunces', Georgia, serif;
  --td-font-ui:      'Public Sans', system-ui, sans-serif;

  /* --- Radius (HANDOFF §1) --- */
  --td-r-card:    16px;
  --td-r-btn:     14px;
  --td-r-panel:   14px;
  --td-r-track:   12px;
  --td-r-segment: 9px;
  --td-r-pill:    999px;


  /* --- State vocabulary, shared with the admin surface -----------------------
     ADMIN-HANDOFF §3 names four state colours plus a tint, a warn and a chevron.
     Every value it asks for already exists above under a different name, so these
     are aliases rather than new hexes: one source of truth per colour, and the
     admin and the app cannot drift apart.

     --td-warn-text IS DELIBERATELY NOT REDEFINED. The handoff's pill text colour is
     #6B4225, which this set already carries as --td-warn-pill-text. --td-warn-text
     is a different colour (#3F2A17) that patient screens use today, and redefining
     it to match the handoff would silently restyle them. The admin uses
     --td-warn-pill-text for pill text; --td-warn-text keeps its existing meaning. */
  --td-tint:       var(--td-accent-tint);
  --td-warn:       var(--td-low);
  --td-chev:       var(--td-chevron);
  --td-info-bg:    var(--td-pill-blue-bg);
  --td-info-text:  var(--td-pill-blue-text);
  --td-ok-bg:      var(--td-pill-green-bg);
  --td-ok-text:    var(--td-pill-green-text);
  --td-grey-bg:    var(--td-track);
  --td-grey-text:  var(--td-general-text);

  /* The one genuinely new value: the warm ground behind the Slipping card, which
     is the only element HANDOFF §3 gives emphasis beyond its pill. Lighter than
     --td-warn-bg so the card reads as attention, not as a warning banner. */
  --td-attention-bg: #FEFBF7;
  /* The border on your own message in a thread. The reference carries it as a
     literal #CBDED6; it is the accent tint one step darker, and it lives here
     rather than inline so the admin and the app keep sharing one file. */
  --td-tint-border: #CBDED6;

  font-family: var(--td-font-ui);
  color: var(--td-ink);
}