/* FO end-card design system: tokens (29 Sep 2026).
   Source of truth: the reel end card (Motion/v4/kit3d.html) that David and Christina chose as the house finish.
   This file is the ONLY place hex values may appear. Everything else uses var(--fo-*). */

:root {
  /* colour */
  --fo-green: #117138;        /* type, logo, rules, links (matches the logo's own green) */
  --fo-action: #008001;       /* the call to action, and nothing else */
  --fo-yellow: #E0BE00;       /* the marker swipe and the dot motif */
  --fo-paper: #F4F2EC;        /* warm ground, never flat white */
  --fo-paper-2: #ECE9DF;      /* recessed surfaces, fields */
  --fo-card: #FBFAF6;         /* raised surfaces */
  --fo-ink: #16261C;          /* body and headlines */
  --fo-ink-2: #3D4A41;        /* secondary text (AA on paper) */
  --fo-ink-3: #55605A;        /* captions, sources (AA on paper, mint and paper-2; darkened 4 Oct 2026) */
  --fo-deep: #0A4424;         /* footer, dark panels */
  --fo-sage: #5E735F;
  --fo-mint: #D8E9DD;
  --fo-line: rgba(22, 38, 28, .12);
  --fo-green-10: rgba(17, 113, 56, .10);
  --fo-green-18: rgba(17, 113, 56, .18);
  --fo-white: #FFFFFF;

  /* living background palette (light tone) */
  --fo-blob-1: #CDEBD4;
  --fo-blob-2: #F3E27A;
  --fo-blob-3: #D8EEDC;

  /* type */
  --fo-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --fo-track-display: -0.035em;
  --fo-track-tight: -0.02em;
  --fo-lh-display: 1.04;
  --fo-display-xl: clamp(2.75rem, 1.4rem + 5.6vw, 6.25rem);      /* hero */
  --fo-display-l: clamp(2.4rem, 1.4rem + 4.2vw, 5rem);     /* section heads, end card */
  --fo-display-m: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  --fo-body-l: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --fo-body: 1.0625rem;
  --fo-small: .9375rem;
  --fo-micro: .875rem;

  /* space and shape */
  --fo-gutter: clamp(1rem, .4rem + 3vw, 3.5rem);
  --fo-section: clamp(4.5rem, 3rem + 7vw, 10rem);
  --fo-max: 1240px;
  --fo-radius-pill: 999px;
  --fo-radius-card: 28px;
  --fo-radius-panel: 44px;
  --fo-radius-field: 16px;

  /* shadow: tinted green, pooled under the element (never grey drop shadows) */
  --fo-shadow-cta: 0 18px 40px -18px rgba(0, 128, 1, .55);
  --fo-shadow-cta-hover: 0 24px 50px -20px rgba(0, 128, 1, .62);
  --fo-shadow-card: 0 30px 70px -40px rgba(10, 68, 36, .45);

  /* motion */
  --fo-ease-out: cubic-bezier(.215, .61, .355, 1);        /* easeOutCubic */
  --fo-ease-inout: cubic-bezier(.645, .045, .355, 1);     /* easeInOutCubic */
  --fo-ease-back: cubic-bezier(.34, 1.25, .64, 1);
  --fo-rise: .55s;
  --fo-stagger: .14s;
  --fo-wipe: .4s;
}