/* ==========================================================================
   Famspring Design System — colors, type, spacing, radii, shadows
   ==========================================================================
   Single source of truth. Drop in via:
     <link rel="stylesheet" href="colors_and_type.css">
   Then use the CSS vars OR the semantic classes (.h1, .btn-primary, .card …).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Fraunces:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");

:root {
  /* -------------------------------------------------------------------- */
  /* COLOR — base tokens                                                   */
  /* -------------------------------------------------------------------- */

  /* Hero green — placeholder until the real logo PNG is provided.         */
  --green-100: #e4f1e8;
  --green-300: #a7d1b4;
  --green-500: #5fa572;
  --green-600: #3f8f5e; /* PRIMARY */
  --green-700: #2f6f47;
  --green-900: #1c4429;

  /* Cream / paper neutrals — warm, never pure white.                      */
  --cream-50:  #fbf7f0;
  --cream-100: #f4ecdd;
  --cream-200: #ede2cd;

  /* Ink — green-leaning near-blacks. NEVER use pure #000.                 */
  --ink-900: #1f2a24;
  --ink-700: #3d4a42;
  --ink-500: #6b7770;
  --ink-300: #c7cec8;
  --ink-200: #e0e3df;
  --ink-100: #eef0ec;

  /* Warm accents — used sparingly. Coral for emphasis, sun for illustration only. */
  --accent-coral: #e08762;
  --accent-sun:   #e9c065;

  /* Semantic                                                              */
  --color-bg:        var(--cream-50);
  --color-bg-alt:    var(--cream-100);
  --color-bg-tint:   var(--green-100);
  --color-fg:        var(--ink-900);
  --color-fg-muted:  var(--ink-700);
  --color-fg-subtle: var(--ink-500);
  --color-border:    var(--ink-300);
  --color-primary:   var(--green-600);
  --color-primary-hover: var(--green-700);

  --color-success: var(--green-600);
  --color-warning: #c58a2e;
  --color-danger:  #b5443b;

  /* -------------------------------------------------------------------- */
  /* TYPE                                                                  */
  /* -------------------------------------------------------------------- */
  --font-sans:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale (rem @ 16px root) */
  --type-display: 3.25rem;  /* 52 */
  --type-h1:      2.5rem;   /* 40 */
  --type-h2:      1.875rem; /* 30 */
  --type-h3:      1.375rem; /* 22 */
  --type-pull:    1.5rem;   /* 24 */
  --type-lead:    1.125rem; /* 18 */
  --type-body:    1rem;     /* 16 */
  --type-meta:    0.875rem; /* 14 */
  --type-micro:   0.75rem;  /* 12 */

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  /* Tracking */
  --tracking-tight: -0.01em;
  --tracking-wide:  0.08em;

  /* -------------------------------------------------------------------- */
  /* SPACING — 4-pt 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-stack:   var(--space-6);  /* between body paragraphs */
  --space-section: var(--space-24); /* between marketing bands */

  --container-max: 1120px;
  --container-pad: var(--space-6);

  /* -------------------------------------------------------------------- */
  /* RADII                                                                 */
  /* -------------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:  12px;  /* default cards, buttons */
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* -------------------------------------------------------------------- */
  /* SHADOWS — only two levels.                                            */
  /* -------------------------------------------------------------------- */
  --shadow-sm:
    0 1px 2px rgba(31, 42, 36, 0.06),
    0 1px 1px rgba(31, 42, 36, 0.04);
  --shadow-md:
    0 12px 24px -8px rgba(31, 42, 36, 0.12),
    0 4px 8px -2px rgba(31, 42, 36, 0.06);

  /* -------------------------------------------------------------------- */
  /* MOTION                                                                */
  /* -------------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur-med:  300ms;
  --dur-slow: 500ms;

  /* Focus */
  --focus-ring: 2px solid var(--green-600);
  --focus-offset: 2px;
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES — opt-in helpers, not a reset
   ========================================================================== */

.h-display, .display {
  font-family: var(--font-sans);
  font-size: var(--type-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.h1 {
  font-family: var(--font-sans);
  font-size: var(--type-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.h2 {
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-900);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.pull, .pullquote {
  font-family: var(--font-serif);
  font-size: var(--type-pull);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--green-700);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--type-lead);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.body, .p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-900);
}

.meta {
  font-family: var(--font-sans);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink-500);
}

.eyebrow, .micro {
  font-family: var(--font-sans);
  font-size: var(--type-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--green-600);
}

/* ==========================================================================
   COMPONENTS — small, semantic, opinionated
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.btn-primary {
  background: var(--green-600);
  color: var(--cream-50);
}
.btn-primary:hover { background: var(--green-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-secondary {
  background: transparent;
  color: var(--green-700);
  border-color: var(--green-600);
}
.btn-secondary:hover { background: var(--green-100); }

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
}
.btn-ghost:hover { background: var(--ink-100); }

.card {
  background: var(--cream-50);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.card-featured {
  border: 1.5px solid var(--green-600);
  padding: var(--space-8);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-100);
  color: var(--green-700);
  font-size: var(--type-meta);
  font-weight: 500;
}

.divider {
  height: 1px;
  background: var(--ink-300);
  border: 0;
  margin: var(--space-8) 0;
}

/* ==========================================================================
   FOCUS — visible, not glowy
   ========================================================================== */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}