/* ============================================================================
   4founder redesign — tokens (Phase 0b)
   Loaded only on redesign-rendered pages (cutover-gated); vars live on :root
   but are inert unless something uses them, so Oxygen pages are unaffected.

   PALETTE DRIFT — decided 2026-08: the .dc.html TEMPLATES are canonical, the
   design project's own tokens/colors.css has DIFFERENT (older/drifted) values.
   Design is followed 100%, therefore the template hexes below win:

     token             template (canon)   tokens/colors.css (ignored)
     --ff-brand        #0a8dff            #088aff  (--color-brand)
     --ff-brand-deep   #0874d6            #0068c4  (--color-brand-deep)
     --ff-heading      #070723            #010119  (--color-heading)
     --ff-text-muted   #4d4d5c            #545454  (--color-text-muted)
     --ff-border       #e4e8f1            #e3e9f3  (--color-border)
     --ff-bg-tint      #f4f8ff            #f2f3fb  (--color-bg-tint)

   Non-color scales (spacing / typography / radius / motion) ARE adopted from
   the design tokens/*.css where they don't contradict template usage; adopted
   values are marked [design], template-derived ones [observed].
   ============================================================================ */

:root {
  /* ── Palette (canonical template hexes) ─────────────────────────────────── */
  --ff-brand: #0a8dff;          /* primary blue — links, CTAs, accents        */
  --ff-brand-deep: #0874d6;     /* hover / secondary blue, card headings      */
  --ff-heading: #070723;        /* near-black navy headings                   */
  --ff-text: #1b1b1b;           /* body copy (template body color)            */
  --ff-text-muted: #4d4d5c;     /* secondary copy                             */
  --ff-border: #e4e8f1;         /* hairline card border                       */
  --ff-bg: #fdfeff;             /* page background (off-white)                */
  --ff-bg-tint: #f4f8ff;        /* [observed] pale-blue alternating sections  */
  --ff-brand-rgb: 10,141,255;   /* for rgba(var(--ff-brand-rgb), a)          */

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --ff-font: 'Host Grotesk',Inter,system-ui,-apple-system,sans-serif;
  /* [observed] template heading/eyebrow scale (design typography.css uses
     fixed rem sizes + 1.3rem body — templates use clamp() and default 1rem
     body, so the template values win here). */
  --ff-text-h1: clamp(2rem,3.9vw,3.4rem);
  --ff-text-h2: clamp(1.9rem,3.4vw,2.7rem);
  --ff-text-h3: 1.2rem;
  --ff-text-lead: 1.12rem;      /* lead paragraph under headings              */
  --ff-text-small: 0.98rem;     /* card body copy                             */
  --ff-text-eyebrow: 0.76rem;   /* uppercase section eyebrow                  */
  /* [design] weights — templates additionally use 900 for dot-eyebrows */
  --ff-weight-regular: 400;
  --ff-weight-medium: 500;
  --ff-weight-semibold: 600;
  --ff-weight-bold: 700;
  --ff-weight-extrabold: 800;
  --ff-weight-black: 900;
  /* [observed] leading (design says 1.2/1.4/1.6; template headings run
     1.04–1.12 and body 1.5–1.6) */
  --ff-leading-tight: 1.1;
  --ff-leading-normal: 1.5;
  --ff-leading-relaxed: 1.6;
  --ff-tracking-tight: -0.045em;   /* [observed] big headings                 */
  --ff-tracking-eyebrow: 0.12em;   /* [observed] section eyebrows             */

  /* ── Spacing & layout [design tokens/spacing.css] ───────────────────────── */
  --ff-space-1: 0.5rem;
  --ff-space-2: 1rem;
  --ff-space-3: 1.5rem;
  --ff-space-4: 2rem;
  --ff-space-5: 3rem;
  --ff-space-6: 4rem;
  --ff-container-max: 1280px;
  --ff-container-content: 1200px; /* [observed] the width templates actually use */
  --ff-container-mid: 1000px;
  --ff-container-reading: 860px;
  --ff-section-pad-x: clamp(20px,5vw,44px); /* [observed] template gutter     */
  --ff-section-pad-y: clamp(56px,7vw,96px); /* [observed] template section pad */
  --ff-gap-grid: 1.5rem;

  /* ── Radius [brief-fixed + design radius-shadow.css] ────────────────────── */
  --ff-radius: 1rem;            /* default cards/inputs                       */
  --ff-radius-lg: 1.3rem;       /* feature cards                              */
  --ff-radius-sm: 0.5rem;       /* [design] small buttons / framed media      */
  --ff-radius-md: 0.75rem;      /* [design] large buttons / mobile menu       */
  --ff-radius-btn: 14px;        /* [observed] primary/outline CTA buttons     */
  --ff-radius-field: 0.8rem;    /* [observed] .ff-field inputs                */
  --ff-radius-pill: 999px;

  /* ── Shadows [observed in templates] ────────────────────────────────────── */
  --ff-shadow-card: 0 0 20px 4px rgba(103,133,219,0.1);     /* soft blue glow */
  --ff-shadow-cta: 0 14px 30px rgba(var(--ff-brand-rgb),0.30); /* brand CTA   */
  --ff-shadow-lift: 0 18px 38px rgba(103,133,219,0.2);      /* card hover     */

  /* ── Motion [design tokens/motion.css + observed reveal] ────────────────── */
  --ff-duration-fast: .2s;
  --ff-duration-base: .3s;
  --ff-duration-slow: .5s;
  --ff-ease: ease;
  --ff-ease-nav: cubic-bezier(.84,.05,.31,.93);
  --ff-reveal-duration: .7s;    /* [observed] data-reveal fade/slide          */
  --ff-reveal-shift: 24px;

  /* ── Page-top gradient [observed — identical on every template] ─────────── */
  --ff-grad-page: radial-gradient(circle at 18% 20%,rgba(var(--ff-brand-rgb),0.11),transparent 28%),radial-gradient(circle at 84% 6%,rgba(var(--ff-brand-rgb),0.08),transparent 30%),linear-gradient(180deg,#e6f3fc 0%,#f1f7fe 16%,#ffffff 46%,#ffffff 78%,#f8fbff 100%);
}