/* ============================================================
   WoundScore Design System — Tokens
   Single source of truth for all design decisions.
   Do not hard-code any of these values in page CSS.
   ============================================================ */

:root {

  /* ── Colors ── */
  --color-primary:     #1B4332;
  --color-mid:         #2D6A4F;
  --color-sage:        #A8C5A0;
  --color-sage-light:  #E8F0E8;
  --color-cream:       #F5F0EB;
  --color-near-black:  #1A1A1A;
  --color-white:       #FFFFFF;
  --color-border:      rgba(168, 197, 160, 0.35);
  --color-text-body:   #2f3833;
  --color-text-muted:  #7a8c84;
  --color-text-subtle: #3f4a45;

  /* Semantic aliases (kept for backwards compat with older inline CSS) */
  --primary-green:  var(--color-primary);
  --mid-green:      var(--color-mid);
  --sage:           var(--color-sage);
  --sage-light:     var(--color-sage-light);
  --cream:          var(--color-cream);
  --near-black:     var(--color-near-black);
  --white:          var(--color-white);
  --border:         var(--color-border);

  /* ── Spacing scale ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Type scale ── */
  --text-caption: 0.75rem;
  --text-small:   0.82rem;
  --text-body:    0.95rem;
  --text-lg:      1.05rem;
  --text-h3:      1.1rem;
  --text-h2:      1.4rem;
  --text-h1:      clamp(2rem, 3.5vw, 3rem);
  --text-display: clamp(2.4rem, 4vw, 3.6rem);

  /* ── Border radius ── */
  --radius-sm:    6px;
  --radius-md:    9px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-logo:  13px;
  --radius-badge: 9px;
  --radius-input: 9px;
  --radius-btn:   9px;
  --radius-card:  12px;
  --radius-phone: 46px;
  --radius-inner: 36px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 4px rgba(27, 67, 50, 0.06);
  --shadow-md:    0 2px 16px rgba(27, 67, 50, 0.10);
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-soft:  0 8px 30px rgba(27, 67, 50, 0.10);
  --shadow-phone: 0 26px 70px rgba(27, 67, 50, 0.25);

  /* ── Layout ── */
  --container: 1440px;
  --reading-width: 700px;
}