/* =============================================================
   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 Complete Brand Guidelines. Typeface: Geist.
   ============================================================= */

/* Geist is self-hosted in /fonts so CloudFront CSP can stay default-src 'self'.
   Source of this file: design-system/colors_and_type.css (re-copy if tokens change). */

:root {
  /* ====== COLOR ====== */
  --paper:          #E3EFDC;  /* Willow Brook */
  --surface:        #FFFFFF;
  --paper-deep:     #D5E6CC;
  --paper-contrast: #C5D4BC;

  --ink:        #000000;
  --ink-soft:   #2F3D34;
  --ink-quiet:  #5A5D6A;
  --ink-faint:  #9DA2B3;

  --border:        #D3D6E0;
  --border-strong: #BCBFCC;

  --sienna:      #3E7052;  /* Vintage Green; token name is legacy */
  --sienna-deep: #2F5640;
  --sienna-lift: #E3EFDC;
  --sienna-soft: #E3EFDC;

  --tint-navy: #EDEFF7;

  --moss:      #3E7052;
  --moss-soft: #D4E8CE;
  --clay:      #8F3B31;
  --clay-soft: #EFE2DF;

  /* Aliases for intent (semantic → 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 · primary button fill */
  --action-hover:    #2F5640;
  --accent:          var(--sienna);
  --accent-hover:    var(--sienna-deep);
  --confirm:         var(--moss);
  --reject:          var(--clay);

  /* ====== TYPE FAMILIES ====== */
  --font-brand: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --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) ====== */
  --shadow-sm: 0 1px 2px rgb(62 112 82 / 0.06);
  --shadow-md: 0 2px 8px rgb(62 112 82 / 0.08), 0 1px 2px rgb(62 112 82 / 0.05);
  --shadow-lg: 0 8px 28px rgb(62 112 82 / 0.10);

  /* ====== 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 ====== */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--sienna);
}

/* =============================================================
   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;
}

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

.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-sans);
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.03em;
  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);
}
.t-h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
}

.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;
}

/* 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;
}
a:hover {
  color: var(--sienna-deep);
}
:focus-visible {
  outline: 2px solid var(--sienna);
  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;
  }
}