/* ============================================================
   Kit Wellness — Colors, Type & Tokens
   The single source of truth for visual foundations.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* -----------------------------------------------------------
     COLORS — Primary palette
     ----------------------------------------------------------- */
  --color-soft-sand:    #F5EEE6;  /* Background, calm surfaces */
  --color-rhythm-sage:  #A8C4A2;  /* Buttons, highlights */
  --color-deep-moss:    #3E5544;  /* Primary text, dark accents */

  /* Accent palette — used sparingly for emotional cues */
  --color-blush-rose:   #EFBBCF;  /* Emotional UI feedback */
  --color-moon-blue:    #BFDDE6;  /* Breath, reset states */
  --color-amber-glow:   #FFD8A9;  /* Energy, morning prompts */

  /* Neutrals */
  --color-white:        #FDFDFD;
  --color-border:       #D9D9D9;
  --color-ink:          #333333;

  /* Deep moss tinted scale (for darker UI surfaces) */
  --color-moss-900:     #2A3B30;
  --color-moss-700:     #3E5544;
  --color-moss-500:     #5C7766;
  --color-moss-300:     #8FA395;

  /* Sand tinted scale */
  --color-sand-50:      #FBF7F2;
  --color-sand-100:     #F5EEE6;
  --color-sand-200:     #ECE2D4;
  --color-sand-300:     #DDD0BD;

  /* -----------------------------------------------------------
     SEMANTIC COLORS
     ----------------------------------------------------------- */
  --bg:              var(--color-sand-100);  /* page background */
  --bg-raised:       var(--color-white);     /* card / sheet */
  --bg-sunken:       var(--color-sand-50);   /* subtle wells */
  --bg-inverse:      var(--color-deep-moss); /* dark sections */

  --fg:              var(--color-deep-moss); /* primary text */
  --fg-muted:        var(--color-moss-500);  /* secondary text */
  --fg-subtle:       var(--color-moss-300);  /* tertiary text */
  --fg-on-dark:      var(--color-sand-100);  /* text on moss */

  --border:          rgba(62, 85, 68, 0.12); /* hairlines */
  --border-strong:   rgba(62, 85, 68, 0.24);

  --accent:          var(--color-rhythm-sage);
  --accent-hover:    #94B58E;
  --accent-fg:       var(--color-deep-moss);

  /* Mood-based feedback (mirrors app tone system) */
  --mood-calm:       var(--color-rhythm-sage);
  --mood-stressed:   var(--color-moon-blue);
  --mood-inspired:   var(--color-amber-glow);
  --mood-numb:       var(--color-blush-rose);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */
  --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Font sizes (modular scale, base 16) */
  --fs-xs:   0.75rem;   /* 12 — labels, captions */
  --fs-sm:   0.875rem;  /* 14 — meta */
  --fs-base: 1rem;      /* 16 — body */
  --fs-md:   1.125rem;  /* 18 — emphasized body */
  --fs-lg:   1.375rem;  /* 22 — small headings */
  --fs-xl:   1.75rem;   /* 28 — section titles */
  --fs-2xl:  2.25rem;   /* 36 — page heads */
  --fs-3xl:  3rem;      /* 48 — display */
  --fs-4xl:  4rem;      /* 64 — hero */

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

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* -----------------------------------------------------------
     SPACING (4px base)
     ----------------------------------------------------------- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 6rem;     /* 96 */

  /* -----------------------------------------------------------
     RADII — soft, generous, never sharp
     ----------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------
     SHADOWS — diffuse, low-contrast, never harsh
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(62, 85, 68, 0.04);
  --shadow-sm: 0 2px 8px rgba(62, 85, 68, 0.06);
  --shadow-md: 0 8px 24px rgba(62, 85, 68, 0.08);
  --shadow-lg: 0 20px 48px rgba(62, 85, 68, 0.10);

  /* -----------------------------------------------------------
     MOTION — slow, breath-paced; nothing snappy or bouncy
     ----------------------------------------------------------- */
  --ease-calm:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-breath:  cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur-fast:     180ms;
  --dur-normal:   320ms;
  --dur-slow:     560ms;
  --dur-breath:   4000ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.kw-display,
.kw-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.kw-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.kw-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.kw-h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.kw-h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.kw-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.kw-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.kw-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.kw-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.kw-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}