/* =================================================================
   NewLeaf Recovery Services — Proposal Design Tokens
   Aurora Design System · Sage-Green Variant
   Per Tamesha's brand direction (May 19, 2026 email):
     "Sage green, cream, soft neutrals · Modern healthcare/wellness aesthetic"
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital,wght@0,400;1,400&display=swap');

:root {
  /* ── Brand Core (Aurora navy retained as primary dark) ── */
  --cp-navy:          #0E1E36;
  --cp-navy-mid:      #1A2F4E;
  --cp-navy-light:    #243d5e;

  /* ── Sage Green (per Tamesha's brand direction) ── */
  --sage:             #6B8E7F;   /* primary sage accent */
  --sage-dark:        #4A6B5E;   /* deeper sage for emphasis */
  --sage-pale:        #E8EDE9;   /* light sage tint for cards */
  --sage-light:       #8FAB9E;

  /* ── Soft neutrals (her words) ── */
  --cream:            #F8F7F4;
  --cream-warm:       #F4F1EB;
  --warm-border:      #E5E1DB;
  --warm-muted:       #6B6560;

  /* ── Slate neutrals for text hierarchy ── */
  --slate-50:   #F8FAFC;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;

  /* ── Foreground / Background semantic ── */
  --fg-1: var(--cp-navy);
  --fg-2: var(--slate-600);
  --fg-3: var(--slate-400);
  --fg-4: var(--slate-300);
  --fg-inverse: #FFFFFF;

  --bg-app:     var(--cream);
  --bg-surface: #FFFFFF;
  --bg-muted:   var(--slate-50);

  /* ── Typography ── */
  --font-sans:    'Geist', system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  36px;
  --fs-5xl:  48px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0em;
  --ls-wide:   0.05em;
  --ls-wider:  0.1em;

  /* ── Radii ── */
  --radius:      10px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* ── Spacing (8-pt 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-16: 64px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 8px 24px -6px rgb(0 0 0 / 0.08), 0 4px 10px -4px rgb(0 0 0 / 0.04);

  /* ── Gradients ── */
  --gradient-sage: linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);
  --gradient-cream: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%);
}

/* ── Semantic element styles ── */
html { font-family: var(--font-sans); color: var(--fg-1); }
body {
  background: var(--bg-app);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sage); color: white; }