/* ============================================================
   Brian Samson Health — Design tokens
   Lifted directly from the Claude Design design system export.
   Consolidated into one file (the original used an @import chain,
   which blocks rendering). Webfonts are loaded from the HTML head.
   ============================================================ */

:root {
  /* ---- Type families ---- */
  --font-sans:   'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif:  'Lora', 'Iowan Old Style', Georgia, serif;
  --font-script: 'Kalam', cursive;

  /* ---- Brand greens (four calibrated tiers, each a surface role) ---- */
  --green-primary: #006241;   /* historic-depth brand green — h1 / brand signal */
  --green-accent:  #00754A;   /* brighter, luminous — primary filled CTAs */
  --green-house:   #1E3932;   /* deep near-black green — feature bands, footer */
  --green-uplift:  #2b5148;   /* mid-dark decorative accent */
  --green-light:   #d4e9e2;   /* pale mint wash */

  /* ---- Gold — reserved for premium / status ceremony only ---- */
  --gold:          #cba258;
  --gold-light:    #dfc49d;
  --gold-lightest: #faf6ee;

  /* ---- Warm neutral surfaces ---- */
  --white:         #ffffff;
  --neutral-cool:  #f9f9f9;
  --neutral-warm:  #f2f0eb;   /* PRIMARY page canvas — warm cream */
  --ceramic:       #edebe9;

  /* ---- Text (never pure black on light) ---- */
  --text-black:      rgba(0, 0, 0, 0.87);
  --text-black-soft: rgba(0, 0, 0, 0.58);
  --text-white:      #ffffff;
  --text-white-soft: rgba(255, 255, 255, 0.70);

  --hairline:     #e7e7e7;
  --input-border: #d6dbde;
  --black-06: rgba(0,0,0,0.06);
  --black-10: rgba(0,0,0,0.10);
  --white-10: rgba(255,255,255,0.10);
  --white-20: rgba(255,255,255,0.20);
  --white-70: rgba(255,255,255,0.70);

  /* ---- Semantic aliases — reference these in components ---- */
  --surface-page:      var(--neutral-warm);
  --surface-page-alt:  var(--ceramic);
  --surface-card:      var(--white);
  --surface-band:      var(--green-house);
  --brand-heading:     var(--green-primary);
  --action:            var(--green-accent);
  --action-ink:        var(--white);
  --text-primary:      var(--text-black);
  --text-secondary:    var(--text-black-soft);
  --text-on-band:      var(--text-white);
  --text-on-band-soft: var(--text-white-soft);
  --accent-premium:    var(--gold);

  /* ---- Type scale ---- */
  --text-display: 5.0rem;
  --text-jumbo:   3.6rem;
  --text-hero:    2.8rem;
  --text-title:   2.4rem;
  --text-lead:    1.9rem;
  --text-body:    1.6rem;
  --text-small:   1.4rem;
  --text-micro:   1.3rem;

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

  --tracking-normal:  -0.01em;
  --tracking-display: -0.02em;
  --tracking-looser:   0.15em;

  --leading-compact: 1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* ---- Spacing (1rem = 10px) ---- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.6rem;
  --space-4: 2.4rem;
  --space-5: 3.2rem;
  --space-6: 4.0rem;
  --space-7: 4.8rem;
  --space-8: 5.6rem;
  --space-9: 6.4rem;

  --gutter:    1.6rem;
  --gutter-md: 2.4rem;
  --gutter-lg: 4.0rem;
  --col-lg:  720px;
  --col-xl: 1200px;

  /* ---- Radii ---- */
  --radius-card:   12px;
  --radius-input:  4px;
  --radius-pill:   50px;
  --radius-circle: 50%;

  /* ---- Elevation: layered and low-alpha, never one heavy drop shadow ---- */
  --shadow-card:
      0px 0px .5px 0px rgba(0,0,0,0.14),
      0px 1px 1px 0px rgba(0,0,0,0.24);
  --shadow-nav:
      0 1px 3px rgba(0,0,0,0.10),
      0 2px 2px rgba(0,0,0,0.06),
      0 0 2px rgba(0,0,0,0.07);
  --shadow-lift:
      0 2px 6px rgba(0,0,0,0.10),
      0 12px 24px rgba(0,0,0,0.08),
      0 0 1px rgba(0,0,0,0.14);

  --transition-base: 0.2s ease;
  --expander-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}