/* The Grab Method — Design Tokens
   v1.0 · 2026 Edition
   See _claude-design-export/colors_and_type.css for the source. */

:root {
  /* ============ COLOR TOKENS ============ */
  /* Backgrounds — cream family carries ~70% of every page */
  --cream:          #EFE5D2;
  --cream-light:    #F6EDDA;
  --cream-warm:     #EBDDC4;

  /* Brand greens */
  --green:          #0E4B2C;
  --green-deep:     #093822;
  --green-darker:   #062518;

  /* Terracotta accent — ~5–8%, used sparingly */
  --orange:         #C45F1F;
  --orange-bright: #D86A28;

  /* Neutrals */
  --ink:            #1A1A1A;
  --gray-warm:      #6B5E4D;
  --gray-soft:      #9A8E7C;

  /* Lines */
  --line:           rgba(14, 75, 44, 0.12);
  --line-strong:    rgba(14, 75, 44, 0.2);
  --line-on-dark:   rgba(246, 237, 218, 0.12);

  /* ============ SEMANTIC ============ */
  --bg:             var(--cream);
  --bg-alt:         var(--cream-light);
  --bg-warm:        var(--cream-warm);
  --bg-inverted:    var(--green-deep);
  --bg-footer:      var(--green-darker);

  --fg:             var(--ink);
  --fg-muted:       var(--gray-warm);
  --fg-soft:        var(--gray-soft);
  --fg-inverted:    var(--cream-light);
  --fg-accent:      var(--orange);
  --fg-brand:       var(--green);

  --border:         var(--line);
  --border-strong:  var(--line-strong);

  /* ============ TYPE FAMILIES ============ */
  --font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ============ TYPE SCALE ============ */
  --fs-hero:        100px;
  --fs-h1:          64px;
  --fs-h2:          44px;
  --fs-h3:          28px;
  --fs-eyebrow:     11px;
  --fs-body-lg:     18px;
  --fs-body:        15px;
  --fs-body-sm:     13.5px;
  --fs-caption:     12px;

  --lh-display:     0.92;
  --lh-h2:          1.0;
  --lh-h3:          1.1;
  --lh-body:        1.6;
  --lh-body-tight:  1.5;

  --tracking-display: -0.02em;
  --tracking-h2:      -0.015em;
  --tracking-h3:      -0.01em;
  --tracking-eyebrow:  0.28em;
  --tracking-caption:  0.04em;

  /* ============ SPACING ============ */
  --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-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --section-y:        96px;
  --section-y-mobile: 56px;

  --container:        1180px;
  --container-pad:    32px;

  /* ============ RADII ============ */
  --radius-btn:   3px;
  --radius-card:  4px;
  --radius-pill:  100px;

  /* ============ SHADOWS (rare) ============ */
  --shadow-card: 0 1px 2px rgba(14, 75, 44, 0.04), 0 8px 24px rgba(14, 75, 44, 0.06);
  --shadow-lift: 0 4px 12px rgba(14, 75, 44, 0.08), 0 16px 48px rgba(14, 75, 44, 0.10);

  /* ============ MOTION ============ */
  --ease:          cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

@media (max-width: 900px) {
  :root {
    --fs-hero: 56px;
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-h3: 22px;
    --section-y: var(--section-y-mobile);
    --container-pad: 22px;
  }
}