/* The Fast Way — Color tokens
   Sampled from thefastway.in (theme #8FD299), the LinkedIn banner and the
   favicon mark (#20D181). The brand lives on a deep forest-teal ground with a
   single vivid spring-green accent and a pale lime "cream" for display type. */

:root {
  /* ---- Forest / teal-green ground (the signature dark surface) ---- */
  --tfw-forest-950: #041e1b;
  --tfw-forest-900: #063029;
  --tfw-forest-800: #082d29;
  --tfw-forest-700: #0b3531; /* ★ signature brand background */
  --tfw-forest-600: #103f39;
  --tfw-forest-500: #16564c;
  --tfw-forest-400: #1f6f61;

  /* ---- Spring green (the one true accent) ---- */
  --tfw-green-300: #7be9b6;
  --tfw-green-400: #3ddd95;
  --tfw-green-500: #20d181; /* ★ primary accent / CTA */
  --tfw-green-600: #17b06b;
  --tfw-green-700: #0f8b53;

  /* ---- Cream / pale lime (display type on dark) ---- */
  --tfw-cream: #e9f4d2;
  --tfw-cream-soft: #f3f8e6;
  --tfw-mint-100: #dcf3e7;

  /* ---- Neutrals (light-surface product UI) ---- */
  --tfw-white: #ffffff;
  --tfw-bone: #e7e8db;     /* ★ warm off-white (brand neutral) */
  --tfw-stone: #7d7d76;    /* ★ warm mid gray (brand neutral) */
  --tfw-ink: #0e1b18;      /* body text on light */
  --tfw-slate-700: #33453f;
  --tfw-slate-500: #5a6b66;
  --tfw-slate-400: #8a9a95;
  --tfw-line: #e2eae6;     /* hairline borders on light */
  --tfw-mist: #f4f8f6;     /* subtle light surface */

  /* ---- Pop palette (soft pastels for highlights on the forest ground:
         data-viz, illustration, spot accents. Use ONE per composition —
         the brand stays green-led; these are seasoning, not the meal.) ---- */
  --tfw-pop-lime:   #d6f2a0; /* pastel pistachio */
  --tfw-pop-aqua:   #a9e4f5; /* pastel sky */
  --tfw-pop-coral:  #ffb9ac; /* pastel blush */
  --tfw-pop-amber:  #ffdd9c; /* pastel butter */
  --tfw-pop-violet: #cdc6ff; /* pastel lavender */

  /* ---- Semantic status ---- */
  --tfw-success: #20d181;
  --tfw-warning: #f5b942;
  --tfw-danger:  #e8556b;
  --tfw-info:    #35c6f4;

  /* ---- Print-safe (CMYK-in-gamut) equivalents ----
     RGB brand colors are vivid and clip in 4-color process print. Use these
     muted, printable hex values + CMYK builds for anything going to press.
     See guidelines/print-safe.html for the swatch reference.
     Main / forest  #0b3531 → print #12352f · CMYK 82 48 58 55 · ~Pantone 5535 C
     Accent / green #20d181 → print #35b877 · CMYK 72 0 63 0  · ~Pantone 7480 C */
  --tfw-forest-print: #12352f;
  --tfw-green-print:  #35b877;

  /* ================= Semantic aliases ================= */
  /* Default = the dark, marketing "brand" context */
  --color-bg:            var(--tfw-forest-700);
  --color-bg-deep:       var(--tfw-forest-900);
  --surface-raised:      var(--tfw-forest-600);
  --surface-card:        var(--tfw-white);
  --surface-muted:       var(--tfw-mist);

  --text-display:        var(--tfw-cream);
  --text-heading:        var(--tfw-white);
  --text-body:           rgba(233, 244, 210, 0.82);
  --text-body-on-light:  var(--tfw-ink);
  --text-muted:          var(--tfw-slate-500);
  --text-on-accent:      var(--tfw-forest-900);

  --accent:              var(--tfw-green-500);
  --accent-hover:        var(--tfw-green-400);
  --accent-press:        var(--tfw-green-600);

  --border-hairline:     rgba(233, 244, 210, 0.14);
  --border-on-light:     var(--tfw-line);
  --focus-ring:          var(--tfw-green-400);
}

/* Opt-in light context: wrap product UI in .tfw-on-light */
.tfw-on-light {
  --color-bg:       var(--tfw-white);
  --surface-raised: var(--tfw-mist);
  --text-heading:   var(--tfw-ink);
  --text-body:      var(--tfw-slate-700);
  --text-display:   var(--tfw-forest-700);
  --border-hairline: var(--tfw-line);
}