/* ============================================================
   FeeLynx — Colors & Typography
   Tokens sourced from the brand research document
   (FEELYNX_RECHERCHES_GRAPHIQUES.pdf, April 2026).
   Two parallel palettes are defined: GREEN (primary) and BLUE (alternate).
   Pages built under "FeeLynx Green" should import this file; pages
   using the blue palette can override the `--accent-*` vars on :root or
   opt into `.theme-blue` at the wrapper.
   ============================================================ */

/* ---------- FONT IMPORTS ----------
   Brand specifies Expletus Sans (display/titrage) + Saira (body/corps).
   Both loaded from local variable font files (licensed/brand-provided). */
@font-face {
  font-family: 'Saira';
  src: url('fonts/Saira-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Saira-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Expletus Sans';
  src: url('fonts/ExpletusSans-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/ExpletusSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- GREEN PALETTE (primary) ---------- */
  --dark-lynx:        #1d1d1b;  /* near-black ink */
  --white-lynx:       #fff7e9;  /* warm off-white, primary page bg */
  --pale-green:       #88a68f;  /* secondary, soft sage */
  --green-lynx:       #446e60;  /* brand green — buttons, accents */
  --dark-green:       #153738;  /* deep forest — headers, CTAs bg */

  /* ---------- BLUE PALETTE (alternate) ---------- */
  --dark-lynx-blue:   #01084c;  /* indigo-ink */
  --white-lynx-blue:  #e5f9f8;  /* pale mint-cyan bg */
  --blue-green:       #4c86ff;  /* secondary electric blue */
  --blue-lynx:        #2164db;  /* primary blue */
  --green-lynx-blue:  #73e0c1;  /* accent mint-green */

  /* ---------- SEMANTIC (resolve to BLUE by default; GREEN available via .theme-green) ---------- */
  --bg:               var(--white-lynx-blue);
  --bg-elevated:      #ffffff;
  --bg-inverse:       var(--dark-lynx-blue);
  --bg-muted:         #d5efee;        /* pale mint-cyan bg, darkened */

  --fg:               var(--dark-lynx-blue);
  --fg-muted:         #2e3558;
  --fg-subtle:        #6c7393;
  --fg-inverse:       var(--white-lynx-blue);

  --accent:           var(--blue-lynx);
  --accent-strong:    var(--dark-lynx-blue);
  --accent-soft:      var(--green-lynx-blue);

  --border:           rgba(1, 8, 76, 0.14);
  --border-strong:    rgba(1, 8, 76, 0.32);

  --success:          #3ea98a;
  --warning:          #c98b2a;
  --danger:           #b15141;
  --info:             var(--blue-green);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:     'Expletus Sans', 'Iowan Old Style', Georgia, serif;
  --font-body:        'Saira', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE ----------
     Saira for body; Expletus Sans for display.
     Modular-ish: display titles go large & airy; body is
     comfortable at 16px with generous leading. */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   44px;
  --text-4xl:   60px;
  --text-5xl:   84px;
  --text-6xl:   120px;

  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* eyebrow labels, chip text */

  /* ---------- SPACING ----------
     Base unit 4px. Used for padding, gap, margin.  */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ---------- RADII ----------
     Brand leans generous/rounded (card-like). Pills for chips,
     soft rectangles for cards, full for profile avatars. */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-2xl:  44px;
  --r-pill: 999px;
  --r-full: 50%;

  /* ---------- SHADOWS ----------
     Soft, warm, low-contrast. Nothing harsh. */
  --shadow-xs:  0 1px 2px rgba(21, 55, 56, 0.05);
  --shadow-sm:  0 2px 6px rgba(21, 55, 56, 0.06), 0 1px 2px rgba(21, 55, 56, 0.04);
  --shadow-md:  0 8px 20px rgba(21, 55, 56, 0.08), 0 2px 4px rgba(21, 55, 56, 0.04);
  --shadow-lg:  0 20px 40px rgba(21, 55, 56, 0.10), 0 4px 8px rgba(21, 55, 56, 0.05);
  --shadow-xl:  0 32px 64px rgba(21, 55, 56, 0.14), 0 8px 16px rgba(21, 55, 56, 0.06);
  --shadow-inner: inset 0 1px 2px rgba(21, 55, 56, 0.06);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}

/* Blue palette opt-in (same as default — kept for explicit tagging) */
.theme-blue {
  --bg:            var(--white-lynx-blue);
  --bg-inverse:    var(--dark-lynx-blue);
  --bg-muted:      #d6f0ef;
  --fg:            var(--dark-lynx-blue);
  --fg-inverse:    var(--white-lynx-blue);
  --accent:        var(--blue-lynx);
  --accent-strong: var(--dark-lynx-blue);
  --accent-soft:   var(--green-lynx-blue);
  --border:        rgba(1, 8, 76, 0.14);
  --border-strong: rgba(1, 8, 76, 0.32);
}

/* Green palette opt-in (legacy / alternate surfaces) */
.theme-green {
  --bg:            var(--white-lynx);
  --bg-inverse:    var(--dark-green);
  --bg-muted:      #f3ecd8;
  --fg:            var(--dark-lynx);
  --fg-muted:      #4a4a48;
  --fg-subtle:     #7a7872;
  --fg-inverse:    var(--white-lynx);
  --accent:        var(--green-lynx);
  --accent-strong: var(--dark-green);
  --accent-soft:   var(--pale-green);
  --border:        rgba(21, 55, 56, 0.14);
  --border-strong: rgba(21, 55, 56, 0.32);
}

/* Dark inverse (for full-bleed dark hero sections) */
.theme-dark {
  --bg:            var(--dark-green);
  --bg-elevated:   #1c4444;
  --bg-muted:      #0f2a2b;
  --fg:            var(--white-lynx);
  --fg-muted:      #c8d6cd;
  --fg-subtle:     #8aa49a;
  --fg-inverse:    var(--dark-lynx);
  --accent:        var(--pale-green);
  --accent-strong: var(--white-lynx);
  --border:        rgba(255, 247, 233, 0.12);
  --border-strong: rgba(255, 247, 233, 0.24);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Opt-in: wrap content in .fl-prose or apply via page template.
   ============================================================ */

.fl-root,
body.fl-root {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fl-h1, h1.fl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.fl-h2, h2.fl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.fl-h3, h3.fl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0;
}

.fl-h4, h4.fl {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0;
}

.fl-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
}

.fl-body, p.fl {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

.fl-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
}

.fl-caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-subtle);
  line-height: var(--leading-snug);
}

.fl-code, code.fl {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 0.15em 0.4em;
  border-radius: var(--r-xs);
  color: var(--accent-strong);
}

.fl-hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--sp-8) 0;
}

/* Utility — quick brand link */
.fl-link {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
.fl-link:hover { color: var(--accent-strong); }