/* ──────────────────────────────────────────────────────────
   Spring Design System — Tokens
   Colors, type, spacing, radius, shadows, motion
   Source: 02_Brand_Identity/Visual_Design_Language.html
   ────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Colors: greens ── */
  --forest: #2C3E2D;
  --sage: #6B7F5E;
  --sage-light: #8A9E7C;
  --sage-pale: #B8C5AD;
  --moss: #7A9B6D;

  /* ── Colors: warms ── */
  --terracotta: #C4856A;
  --terracotta-light: #D4A088;
  --terracotta-deep: #A8704F;
  --dusty-rose: #C47070;

  /* ── Colors: cool accent ── */
  --lavender: #B8A9C9;          /* AI companion only */

  /* ── Colors: surfaces ── */
  --cream: #F5F0E8;             /* page background */
  --linen: #EDE8DE;             /* cards, secondary */
  --linen-cool: #E4E6DF;        /* slightly cool linen */
  --white: #FEFDFB;             /* warmest "white" */

  /* ── Colors: text ── */
  --charcoal: #333333;
  --ink: #1A1F1A;
  --warm-gray: #8A8A7D;

  /* ── Colors: semantic ── */
  --fg-1: var(--forest);        /* high emphasis */
  --fg-2: var(--charcoal);      /* body */
  --fg-3: var(--warm-gray);     /* metadata */
  --fg-on-dark: var(--cream);
  --bg-page: var(--cream);
  --bg-surface: var(--white);
  --bg-surface-alt: var(--linen);
  --bg-dark: var(--forest);
  --accent: var(--sage);
  --accent-warm: var(--terracotta);
  --success: var(--moss);
  --error: var(--dusty-rose);
  --border-subtle: rgba(44, 62, 45, 0.12);
  --border-strong: var(--sage-pale);

  /* ── Type: families ── */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'SF Mono', Menlo, 'JetBrains Mono', monospace;

  /* ── Type: scale ── */
  --fs-hero: 56px;              /* hero / cover */
  --fs-display: 42px;           /* section opener */
  --fs-h1: 34px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-label: 11px;

  /* ── Type: weights ── */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Type: leading ── */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ── Type: tracking ── */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.14em;           /* labels uppercase */

  /* ── 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-20: 80px;
  --space-30: 120px;

  /* ── Radius ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ── Shadows (Forest-tinted, never neutral black) ── */
  --shadow-whisper: 0 1px 3px rgba(44, 62, 45, 0.06);
  --shadow-soft: 0 2px 8px rgba(44, 62, 45, 0.08);
  --shadow-medium: 0 4px 16px rgba(44, 62, 45, 0.10);
  --shadow-elevated: 0 12px 40px rgba(44, 62, 45, 0.14);
  --shadow-focus: 0 0 0 3px rgba(107, 127, 94, 0.18);

  /* ── Motion ── */
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 400ms;
  --dur-celebrate: 1000ms;
}

/* ──────────────────────────────────────────────────────────
   Semantic typography classes (use directly or @apply pattern)
   ────────────────────────────────────────────────────────── */

.t-hero,
h1.spring-hero {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-display,
h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h2,
h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h3,
h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h4,
h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body-lg,
p.lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body,
p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-label,
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--terracotta-deep);
}

.t-accent,
.accent-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--sage);
}

code, pre {
  font-family: var(--font-mono);
}

/* divider line, 1px Forest @ 12% */
.divider-line {
  height: 1px;
  background: var(--border-subtle);
  width: 100%;
}

/* short tracker accent */
.divider-mark {
  width: 60px;
  height: 2px;
  background: var(--terracotta);
  border-radius: 2px;
}