/* =============================================================
   Ashlee Health Design System · colors_and_type.css
   Single source of truth for color, type, spacing, radii,
   shadows, and motion. Maps 1:1 to Tailwind tokens.
   Palette from the Ashlee Health brand guidelines. Typeface: Geist.
   Token NAMES are unchanged from the Beacon era (--sienna, --moss,
   --tint-navy are legacy names); token VALUES are the Ashlee palette.

   THE TWO-ROLE RULE (DESIGN-3, 2026-09-14). Vintage Green #3E7052
   carries two colour roles, and focus is a third role on its own token:
     --action  fills AT MOST ONE primary button per screen, at the
               moment of consequence. An open modal dialog (focus
               trapped, aria-modal) counts as its own screen. The
               label is --on-action (white).
     --sienna  the rule and kicker moment only: (a) the NoticeBar left
               rule, (b) the section-rule dot (Value Portrait PDF rule, attestation PDF rule,
               the static kit, assets/logos/ashlee-rule.svg), (c) the
               PDF stated-preference kicker. Nothing else: no card
               rules, dialog rules, note rules, status text, progress
               fills, icons, eyebrows or labels.
     --focus   every focus ring and outline.
   Confirmation states use the moss-soft family plus a word; failure
   uses clay plus a word; every other status is ink plus a word. Fix
   by variant, never by recolouring. The outlined Ashlee wordmark and
   mark SVGs keep their Vintage Green artwork and are not an accent
   moment; text wordmarks are ink or ink-quiet.
   ============================================================= */

/* --- Generated copy: do not edit ----------------------------------
   GENERATED from design-system/colors_and_type.css by
   scripts/sync_website_tokens.sh. Do not edit this file: change the
   source, run the script and commit both files. The script with
   --check exits 1 when this copy is stale.
   The one difference from the source: its type-loading comment and
   Google Fonts import are replaced by this header. The marketing CSP
   sets font-src self, so Geist is self-hosted via website/fonts.css
   at 400 (Regular) and 500 (Medium) only; weight 600 small-caps
   labels render with the Medium face, never a synthesised bold.
   JetBrains Mono is not self-hosted (the site uses no .t-mono).
   --------------------------------------------------------------- */

:root {
  /* ====== COLOR ====== */
  /* Surfaces */
  --paper:          #E3EFDC;  /* Willow Brook: app background */
  --surface:        #FFFFFF;  /* cards, documents, Ashlee chat bubbles */
  --paper-deep:     #D5E6CC;  /* raised fills, hover, patient chat bubbles (ink text 16.02:1) */
  --paper-contrast: #C5D4BC;  /* subtitle color on Vintage Green backgrounds (3.71:1, large text only) */

  /* Ink (text + headings) */
  --ink:        #000000;  /* black: headings, emphasis, text wordmarks */
  --ink-soft:   #2F3D34;  /* body text */
  /* AA notes for the Ashlee palette (2026-09-13, REBRAND-1):
     ink-quiet #5A5D6A measures 5.50 on paper, 6.54 on surface,
     4.99 on paper-deep, 5.70 on tint-navy, 5.06 on moss-soft. */
  --ink-quiet:  #5A5D6A;  /* metadata, captions, any quiet text that carries meaning */
  /* ink-faint (Space) measures 2.14 on paper and 2.54 on surface: it
     never carries meaning. Placeholders, disabled states and
     decorative separators only. */
  --ink-faint:  #9DA2B3;

  /* Borders */
  /* Smoke and Steel are card edges and hairlines only. Cards are not
     UI components, so they carry no 3:1 requirement (Steel is 1.83 on
     surface). */
  --border:        #D3D6E0;  /* Smoke: hairlines */
  --border-strong: #BCBFCC;  /* Steel: card edges */
  /* border-input: brand Graphite, reinstated for control boundaries
     (WCAG 1.4.11, 3:1). Measured 4.84 on surface, 4.07 on paper, 3.69
     on paper-deep, 4.22 on tint-navy, 3.74 on moss-soft, 3.83 on
     clay-soft. Text inputs, textareas, selects, radio rings, checkbox
     boxes, secondary and outline buttons, toggles, the chat composer. */
  --border-input:  #6E7180;

  /* Accent: the rule and kicker moment only. The --sienna token name
     is legacy. Its three uses are listed in the header and nothing
     else may spend it. #3E7052 measures 5.76 on surface, 4.84 on
     paper, 4.40 on paper-deep, 5.02 on tint-navy. */
  --sienna:      #3E7052;
  --sienna-deep: #2F5640;  /* legacy deep shade; no text role under the two-role rule */
  --sienna-lift: #E3EFDC;  /* legacy: Willow Brook on Vintage Green grounds */
  --sienna-soft: #D4E8CE;  /* rare tint; prefer --tint-navy for fills */

  /* Cool fill */
  --tint-navy: #EDEFF7;  /* Cloud: info fills */

  /* Semantic · muted, never bright */
  /* Confirm family: moss-soft fill, moss-deep text, 1px moss-deep
     border, a word always present; hover stays in the soft family,
     never a solid green fill. --moss is never text: moss-family text
     is --moss-deep. A moss-soft chip with moss-deep text plus a word
     is for confirmation states only (Confirmed, approved, verified,
     portrait ready, current). */
  --moss:            #3E7052;
  --moss-deep:       #2F5640;  /* text and border: 6.43 on moss-soft, 5.93 on moss-soft-hover */
  --moss-soft:       #D4E8CE;
  --moss-soft-hover: #C8E1C0;  /* moss-soft minus 4 points of HSL lightness (85.9 to 81.8); moss-deep text 5.93 */
  /* Reject family: clay-soft fill, clay text, 1px clay border. Clay
     is destructive and failure only, not a brand color. */
  --clay:            #8F3B31;  /* text and border: 5.85 on clay-soft, 5.28 on clay-soft-hover */
  --clay-soft:       #EFE2DF;
  --clay-soft-hover: #E8D6D1;  /* clay-soft minus 4 points of HSL lightness (90.6 to 86.5); clay text 5.28 */

  /* Aliases for intent (semantic to role) */
  --bg:              var(--paper);
  --bg-raised:       var(--paper-deep);
  --fg:              var(--ink);
  --fg-body:         var(--ink-soft);
  --fg-quiet:        var(--ink-quiet);
  --fg-faint:        var(--ink-faint);
  --fg-on-dark:      var(--paper);
  --fg-subtitle-on-dark: var(--paper-contrast);
  --action:          #3E7052;           /* Vintage Green: one primary per screen */
  --action-hover:    #2F5640;
  --on-action:       #FFFFFF;           /* primary label: 5.76 on --action, 8.31 on --action-hover */
  --accent:          var(--sienna);     /* rule/kicker moment only */
  --accent-hover:    var(--sienna-deep); /* rule/kicker moment only */
  --confirm:         var(--moss);
  --reject:          var(--clay);

  /* ====== TYPE FAMILIES ====== */
  /* Geist everywhere. --font-serif is kept as a slot name for existing
     consumers and resolves to the same sans stack. */
  --font-brand: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;  /* wordmark, brand moments */
  --font-serif: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;  /* display + headings (legacy slot) */
  --font-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ====== TYPE SCALE ====== */
  --text-display-size: 56px;  --text-display-lh: 64px;
  --text-h1-size:      40px;  --text-h1-lh:      48px;
  --text-h2-size:      28px;  --text-h2-lh:      36px;
  --text-h3-size:      20px;  --text-h3-lh:      28px;
  --text-body-lg-size: 20px;  --text-body-lg-lh: 32px;
  --text-body-size:    17px;  --text-body-lh:    28px;  /* above 16px floor */
  --text-body-sm-size: 15px;  --text-body-sm-lh: 24px;
  --text-caption-size: 13px;  --text-caption-lh: 20px;
  --text-domain-size:  12px;  --text-domain-lh:  16px;

  /* ====== SPACING (4pt grid) ====== */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ====== RADII (modest, never toy-like) ====== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ====== SHADOWS (barely-there, always neutral) ====== */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 8px 28px rgb(0 0 0 / 0.08);

  /* ====== MOTION ====== */
  --ease:      cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-micro: 200ms; /* @kind other */
  --dur-macro: 300ms; /* @kind other */

  /* ====== LAYOUT ====== */
  --measure-patient:   640px;  /* conversation, validation, intake */
  --measure-portrait:  720px;  /* Value Portrait document */
  --measure-marketing: 1200px; /* decks, marketing */
  --nav-height:        64px;

  /* ====== FOCUS ====== */
  /* The non-negotiable 2px Vintage Green ring, on its own token so
     focus never spends --sienna. Non-text bar 3:1; measured 5.76 on
     surface, 4.84 on paper, 4.40 on paper-deep, 5.02 on tint-navy,
     4.45 on moss-soft, 4.56 on clay-soft. */
  --focus:      #3E7052;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
}

/* =============================================================
   SEMANTIC TYPE CLASSES · use these instead of raw sizes
   ============================================================= */

html {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--fg-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Geist ships no italic face and loads 400/500/600 only: never fake
     a slant or a weight. */
  font-synthesis: none;
}

body {
  margin: 0;
  color: var(--fg-body);
  background: var(--bg);
}

/* Headings are Geist weight 500. Tracking bands: -0.03em at 36px and
   above (display, h1); -0.02em at 24 to 35px (h2); 0 at 20px and below
   (h3). No heading size sits between 21 and 23px. Small-caps labels
   (.t-domain) are the one exception at 0.14em. */
.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-sans);
  color: var(--fg);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.t-display {
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: -0.03em;
}
.t-h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: -0.03em;
}
.t-h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: -0.02em;
}
.t-h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: 0;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--fg-body);
  text-wrap: pretty;
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--fg-body);
  text-wrap: pretty;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--fg-body);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  color: var(--fg-quiet);
}
.t-domain {
  font-family: var(--font-sans);
  font-size: var(--text-domain-size);
  line-height: var(--text-domain-lh);
  color: var(--fg-quiet);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  color: var(--fg-quiet);
}

/* Prose for the Value Portrait · sans, generous leading */
.t-prose {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink-soft);
  font-weight: 400;
  text-wrap: pretty;
}

/* Emphasis without italics: weight 500 (Medium) in --ink. Never
   italic, never underlined (underline means a link), never an accent
   colour. Quoted speech stays at 400 inside typographic quotes. */
em,
i {
  font-style: normal;
  font-weight: 500;
}
strong,
b {
  font-weight: 500;
}
.t-prose :is(em, i, strong, b),
.t-body :is(em, i, strong, b),
.t-body-lg :is(em, i, strong, b),
.t-body-sm :is(em, i, strong, b) {
  color: var(--ink);
}

/* Brand wordmark helper */
.t-brand {
  font-family: var(--font-brand);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}

/* =============================================================
   BASE RESET (minimal)
   ============================================================= */
* {
  box-sizing: border-box;
}
button {
  font-family: inherit;
  cursor: pointer;
}
a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* Link hover stays neutral: ink-soft with the underline, never an
   accent colour. */
a:hover {
  color: var(--ink-soft);
  text-decoration-line: underline;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}