/* ==========================================================================
   Extra Dollar — Colors & Type
   --------------------------------------------------------------------------
   Source: Extra Dollar Logo Guidelines (PDF), pp. 4–5.
   Primary palette is built around forest green (#063932) — the logo color —
   paired with a "dollar bill" green (#85bb65). Secondary palette adds a
   warm taupe, mid gray, signal yellow, and a cream off-white to keep the
   surface feeling tactile and money-adjacent rather than sterile fintech.

   Type: Sofia Pro (commercial). Substituted with Mulish from Google Fonts
   as a free, near-match humanist geometric sans. Replace fonts/Mulish with
   Sofia Pro woff2 files when licensed.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---------- Brand colors (from guidelines) ---------- */
  --ed-forest:        #063932;  /* primary brand green — logo */
  --ed-bill:          #85bb65;  /* "dollar" accent green */
  --ed-white:         #ffffff;
  --ed-ink:           #1a1a1a;  /* near-black text */

  --ed-taupe:         #bbb9a0;  /* warm secondary */
  --ed-gray:          #8f8f8f;  /* neutral mid-gray */
  --ed-yellow:        #f2dc3b;  /* signal / highlighter yellow */
  --ed-cream:         #eee6e3;  /* paper / off-white surface */

  /* ---------- Forest scale (tints + shades, oklch-derived) ---------- */
  --ed-forest-950:    #02201c;
  --ed-forest-900:    #042b25;
  --ed-forest-800:    #063932;  /* base */
  --ed-forest-700:    #0d4a41;
  --ed-forest-600:    #1a5f54;
  --ed-forest-500:    #2c7569;
  --ed-forest-400:    #5a9a8e;
  --ed-forest-300:    #8fbab1;
  --ed-forest-200:    #c2d8d2;
  --ed-forest-100:    #dde9e5;
  --ed-forest-50:     #eef4f1;

  /* ---------- Bill (dollar green) scale ---------- */
  --ed-bill-700:      #4d7a39;
  --ed-bill-600:      #6a9d50;
  --ed-bill-500:      #85bb65;  /* base */
  --ed-bill-400:      #9fcb84;
  --ed-bill-300:      #bcdaa6;
  --ed-bill-200:      #d6e8c6;
  --ed-bill-100:      #e9f1de;

  /* ---------- Cream / paper neutrals ---------- */
  --ed-paper:         #f7f3f1;  /* page background, warmer than white */
  --ed-cream-200:     #eee6e3;
  --ed-cream-300:     #e0d5d0;
  --ed-stone-400:     #bbb9a0;
  --ed-stone-500:     #8f8f8f;
  --ed-stone-600:     #5e5e5a;
  --ed-stone-700:     #3a3a36;
  --ed-stone-900:     #1a1a1a;

  /* ---------- Semantic tokens ---------- */
  --ed-bg:            var(--ed-paper);
  --ed-bg-inverse:    var(--ed-forest-800);
  --ed-surface:       var(--ed-white);
  --ed-surface-2:     var(--ed-cream-200);
  --ed-surface-sunk:  #f0eae7;

  --ed-fg:            var(--ed-forest-800);   /* primary text */
  --ed-fg-2:          var(--ed-stone-700);    /* secondary text */
  --ed-fg-3:          var(--ed-stone-500);    /* muted / meta */
  --ed-fg-on-dark:    var(--ed-cream-200);
  --ed-fg-on-dark-2:  rgba(238, 230, 227, 0.7);

  --ed-line:          rgba(6, 57, 50, 0.12);
  --ed-line-strong:   rgba(6, 57, 50, 0.24);
  --ed-line-on-dark:  rgba(238, 230, 227, 0.18);

  --ed-accent:        var(--ed-bill-500);
  --ed-accent-ink:    var(--ed-forest-900);
  --ed-highlight:     var(--ed-yellow);

  --ed-success:       #2f8f5a;
  --ed-success-bg:    #e3f1e8;
  --ed-warning:       #c98a14;
  --ed-warning-bg:    #fbeccb;
  --ed-danger:        #c0432f;
  --ed-danger-bg:     #f6dcd6;

  /* ---------- Type ---------- */
  --ed-font-sans:     "Sofia Pro", "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ed-font-display:  "Sofia Pro", "Mulish", ui-sans-serif, system-ui, sans-serif;
  --ed-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ed-font-numeric:  "Sofia Pro", "Mulish", ui-sans-serif, system-ui, sans-serif;

  --ed-tracking-tight:  -0.02em;
  --ed-tracking-snug:   -0.01em;
  --ed-tracking-normal:  0em;
  --ed-tracking-wide:    0.04em;
  --ed-tracking-caps:    0.08em;

  /* Type scale — Sofia Pro/Mulish behave best with generous size jumps */
  --ed-text-xs:       12px;
  --ed-text-sm:       14px;
  --ed-text-base:     16px;
  --ed-text-md:       18px;
  --ed-text-lg:       20px;
  --ed-text-xl:       24px;
  --ed-text-2xl:      30px;
  --ed-text-3xl:      38px;
  --ed-text-4xl:      48px;
  --ed-text-5xl:      64px;
  --ed-text-6xl:      80px;
  --ed-text-7xl:      104px;

  --ed-leading-tight:    1.05;
  --ed-leading-snug:     1.2;
  --ed-leading-normal:   1.4;
  --ed-leading-relaxed:  1.55;

  /* ---------- Spacing (4px base) ---------- */
  --ed-space-0:   0;
  --ed-space-1:   4px;
  --ed-space-2:   8px;
  --ed-space-3:   12px;
  --ed-space-4:   16px;
  --ed-space-5:   20px;
  --ed-space-6:   24px;
  --ed-space-8:   32px;
  --ed-space-10:  40px;
  --ed-space-12:  48px;
  --ed-space-16:  64px;
  --ed-space-20:  80px;
  --ed-space-24:  96px;
  --ed-space-32:  128px;

  /* ---------- Radii — generous, capsule-leaning ---------- */
  --ed-radius-xs:   4px;
  --ed-radius-sm:   8px;
  --ed-radius-md:   12px;
  --ed-radius-lg:   18px;
  --ed-radius-xl:   24px;
  --ed-radius-2xl:  32px;
  --ed-radius-pill: 999px;

  /* ---------- Shadows — soft, single-layer; deep stacks reserved for overlays ---------- */
  --ed-shadow-xs:    0 1px 1px rgba(6, 57, 50, 0.06);
  --ed-shadow-sm:    0 1px 2px rgba(6, 57, 50, 0.06), 0 2px 6px rgba(6, 57, 50, 0.05);
  --ed-shadow-md:    0 4px 12px rgba(6, 57, 50, 0.08), 0 1px 3px rgba(6, 57, 50, 0.06);
  --ed-shadow-lg:    0 16px 40px rgba(6, 57, 50, 0.12), 0 2px 6px rgba(6, 57, 50, 0.06);
  --ed-shadow-xl:    0 32px 80px rgba(6, 57, 50, 0.18), 0 4px 12px rgba(6, 57, 50, 0.08);
  --ed-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(6, 57, 50, 0.05);

  /* ---------- Motion ---------- */
  --ed-ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ed-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ed-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ed-dur-fast:    140ms;
  --ed-dur-base:    220ms;
  --ed-dur-slow:    360ms;
}

/* ==========================================================================
   Semantic element styles — drop colors_and_type.css onto a page and these
   apply by default. Components and prototypes can lean on these classes.
   ========================================================================== */

html, body {
  background: var(--ed-bg);
  color: var(--ed-fg);
  font-family: var(--ed-font-sans);
  font-size: var(--ed-text-base);
  line-height: var(--ed-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ed-display, h1.ed-h1 {
  font-family: var(--ed-font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, var(--ed-text-7xl));
  line-height: var(--ed-leading-tight);
  letter-spacing: var(--ed-tracking-tight);
  color: var(--ed-fg);
}

h1, .ed-h1 {
  font-family: var(--ed-font-display);
  font-weight: 800;
  font-size: var(--ed-text-5xl);
  line-height: var(--ed-leading-tight);
  letter-spacing: var(--ed-tracking-tight);
  margin: 0;
}
h2, .ed-h2 {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: var(--ed-text-3xl);
  line-height: var(--ed-leading-snug);
  letter-spacing: var(--ed-tracking-snug);
  margin: 0;
}
h3, .ed-h3 {
  font-weight: 700;
  font-size: var(--ed-text-2xl);
  line-height: var(--ed-leading-snug);
  letter-spacing: var(--ed-tracking-snug);
  margin: 0;
}
h4, .ed-h4 {
  font-weight: 600;
  font-size: var(--ed-text-xl);
  line-height: var(--ed-leading-snug);
  margin: 0;
}
h5, .ed-h5 {
  font-weight: 600;
  font-size: var(--ed-text-md);
  line-height: var(--ed-leading-snug);
  margin: 0;
}
.ed-eyebrow {
  font-weight: 700;
  font-size: var(--ed-text-xs);
  letter-spacing: var(--ed-tracking-caps);
  text-transform: uppercase;
  color: var(--ed-fg-3);
}
p, .ed-p {
  font-size: var(--ed-text-base);
  line-height: var(--ed-leading-relaxed);
  color: var(--ed-fg-2);
  text-wrap: pretty;
  margin: 0 0 var(--ed-space-4);
}
.ed-lede {
  font-size: var(--ed-text-lg);
  line-height: var(--ed-leading-relaxed);
  color: var(--ed-fg-2);
}
.ed-meta, small {
  font-size: var(--ed-text-sm);
  color: var(--ed-fg-3);
}
.ed-numeric, .ed-money {
  font-feature-settings: "tnum", "lnum";
  letter-spacing: var(--ed-tracking-tight);
  font-weight: 700;
}
code, pre, .ed-mono {
  font-family: var(--ed-font-mono);
  font-size: 0.92em;
}

a, .ed-link {
  color: var(--ed-forest-800);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ed-bill-500);
  transition: color var(--ed-dur-fast) var(--ed-ease-out),
              text-decoration-color var(--ed-dur-fast) var(--ed-ease-out);
}
a:hover, .ed-link:hover {
  color: var(--ed-bill-700);
  text-decoration-color: var(--ed-forest-800);
}

::selection {
  background: var(--ed-yellow);
  color: var(--ed-forest-900);
}