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

:root {
  /* ============ COLOR TOKENS ============ */
  /* v2.1 LOUD (digital): off-white surface + deep green base, hot-orange accent.
     Cream is print-only; the --cream* names now carry the off-white values. */
  --cream:          #F7F4ED;
  --cream-light:    #FBF8F1;
  --cream-warm:     #EDE7DA;
  --offwhite:       #F7F4ED;

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

  /* Terracotta accent — ~5–8%, used sparingly */
  --orange:         #E8701F;
  --orange-bright: #E8701F;
  --orange-hot:     #E8701F;
  /* AA variants — decorative orange #E8701F stays for fills, borders, large display text. */
  --orange-deep:        #B5530F;  /* solid CTA bg (cream-light text 4.70:1) + orange text on light (4.54:1) */
  --orange-deep-hover:  #A54A0C;  /* CTA hover — darken (cream-light text 5.52:1) */
  --orange-text:        #B5530F;  /* orange TEXT on light backgrounds (was #E8701F) */
  --orange-on-dark:     #F4863C;  /* small orange text on dark green (5.2:1) */
  --focus-ring:         #D0641C;  /* keyboard focus — >=3:1 on light AND dark */

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

  /* Lines */
  --line:           rgba(14, 75, 44, 0.12);
  --line-strong:    rgba(14, 75, 44, 0.2);
  --line-on-dark:   rgba(247, 244, 237, 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:   'Fraunces', 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 ============ */
  /* ONE radius, and there is no second one. There were three: a button
     radius a pixel off the card one, which nobody could see and everybody
     had to decide about, and a pill. The pill was a second SHAPE rather
     than a second radius, worn by tabs, stickers, state pills and chips
     that had never earned it. A circle is `50%`, which is a shape and not
     a radius, and only a square box gets one. */
  --radius-card:  4px;

  /* ============ 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;
  }
}