/* =====================================================================
   FutureFeed Design System — ff_design_tokens.css
   Brand Book 2026. Source of truth for color tokens, type ramps,
   semantic styles, motion, elevation.
   ===================================================================== */

:root {
  /* ── Brand primaries ──────────────────────────────────────────── */
  --ff-green:       #44A400;  /* Primary CTA, service-provider surfaces, accents */
  --ff-dark:        #2D6A00;  /* Green hover, depth */
  --ff-light:       #66CC00;  /* Highlight, success, link-on-dark */
  --ff-black:       #1A1A1A;  /* Display headlines, ink */
  --ff-blue:        #1E3A8A;  /* Contractor / service-provider dark surfaces */
  --ff-blue-cta:    #1C528A;  /* Universal modal primary action / wizard navy */
  --ff-blue-cta-hover: #143E6B;  /* Hover for --ff-blue-cta */

  /* ── Tints (subtle fills) ─────────────────────────────────────── */
  --green-tint:     #EEF8E5;  /* Success badges, hover fills */
  --gray-tint:      #EEF1FA;  /* Contractor info banners */
  --section-tint:   #FAFBF6;  /* Warm off-white section background */

  /* ── Accent (sparingly) ───────────────────────────────────────── */
  --accent-orange:  #F5A623;  /* "Webinar" pills, headcount tags. NEVER primary. */

  /* ── Neutrals ─────────────────────────────────────────────────── */
  --body-text:      #3C3C3C;  /* Default body */
  --gray-900:       #111827;
  --gray-700:       #374151;
  --gray-500:       #6B7280;
  --gray-400:       #9CA3AF;
  --gray-300:       #D1D5DB;
  --gray-200:       #E5E7EB;
  --gray-100:       #F3F4F6;
  --gray-50:        #F9FAFB;
  --hairline:       #F2F4F7;  /* Internal table/card hairlines */

  /* ── Brand gradients ──────────────────────────────────────────── */
  --mission-gradient: linear-gradient(135deg, #44A400 0%, #225500 100%);
  --button-gradient:  linear-gradient(135deg, #44A400 0%, #3B8F00 100%);
  --avatar-gradient:  linear-gradient(135deg, #44A400 0%, #1E3A8A 100%); /* Initials fallback */

  /* ── Semantic foreground / background ─────────────────────────── */
  --fg-1: var(--ff-black);     /* Primary ink */
  --fg-2: var(--body-text);    /* Body */
  --fg-3: var(--gray-500);     /* Muted, captions, descriptions in mega-menus */
  --fg-4: var(--gray-400);     /* Disabled, decorative numbering */
  --fg-accent: var(--ff-green);

  --bg-1: #FFFFFF;             /* Page */
  --bg-2: var(--section-tint); /* Alternating section */
  --bg-3: var(--green-tint);   /* Hover fills, success pills */
  --bg-inverse: var(--ff-black);
  --bg-blue: var(--ff-blue);

  /* ── Typography ───────────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: var(--font-sans);
  /* Montserrat reserved for the LOGO LOCKUP ONLY — already baked into the PNGs. */
  --font-logo:    'Montserrat', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;

  /* ── Type scale (px) ──────────────────────────────────────────── */
  --fs-display:   clamp(48px, 6.5vw, 92px);  /* Hero "Rapid. Proven. Affordable." */
  --fs-h1:        clamp(36px, 4vw, 56px);    /* Audience hero, page H1 */
  --fs-h2:        clamp(32px, 3.6vw, 48px);  /* Section H2 */
  --fs-h3:        20px;                       /* Card title */
  --fs-lead:      17px;                       /* Section lead paragraph */
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-xs:        13px;
  --fs-eyebrow:   13px;
  --fs-meta:      11px;                       /* Tag pill, date */
  --fs-micro:     10px;                       /* Mega-menu group headers */

  /* ── Line-height ──────────────────────────────────────────────── */
  --lh-display:   1.0;
  --lh-h1:        1.05;
  --lh-h2:        1.1;
  --lh-h3:        1.25;
  --lh-body:      1.6;
  --lh-tight:     1.4;

  /* ── Tracking / letter-spacing ────────────────────────────────── */
  --ls-display:   -0.035em;
  --ls-h:         -0.025em;
  --ls-tight:     -0.01em;
  --ls-normal:     0;
  --ls-eyebrow:    0.16em;   /* CRITICAL — every eyebrow uses this */
  --ls-cap:        0.12em;
  --ls-cap-tight:  0.08em;
  --ls-micro:      0.10em;

  /* ── Weight ───────────────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ── Spacing scale (4-pt base) ────────────────────────────────── */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* Section vertical rhythm — fluid */
  --section-py:        clamp(60px, 8vw, 110px);
  --section-py-tight:  clamp(48px, 6vw, 80px);
  --section-py-loose:  clamp(72px, 10vw, 140px);

  /* ── Container widths ─────────────────────────────────────────── */
  --container-wide:    80rem;  /* 1280px — Tailwind max-w-7xl */
  --container-narrow:  56rem;  /* 896px  — Tailwind max-w-4xl */
  --container-padX:    clamp(16px, 4vw, 32px);

  /* ── Radii (rounded modern — Databricks/CrowdStrike vibe) ─────── */
  --radius-sm:    6px;
  --radius-md:    8px;     /* Buttons (primary `rounded-lg` = 8px) */
  --radius-lg:    10px;    /* Icon tiles */
  --radius-xl:    12px;    /* Mega-menu rows */
  --radius-2xl:   14px;    /* Glass pillars, mission cards */
  --radius-3xl:   16px;    /* Image panels, testimonial cards */
  --radius-4xl:   20px;    /* Hawk AI screenshot, hero panel */
  --radius-pill:  9999px;  /* Toggles, status dots, "Open Positions" tags */

  /* ── Borders ──────────────────────────────────────────────────── */
  --border-thin:    1px solid var(--gray-100);
  --border-soft:    1px solid var(--gray-200);
  --border-hairline: 1px solid var(--hairline);
  --border-strong:  2px solid var(--ff-green);

  /* ── Shadows (soft, brand-tinted) ─────────────────────────────── */
  --shadow-xs:     0 1px 2px rgba(26,26,26,0.04);
  --shadow-sm:     0 2px 6px rgba(26,26,26,0.05);
  --shadow-card:   0 12px 28px rgba(68,164,0,0.08);                          /* Green-tinted, on hover */
  --shadow-blue:   0 18px 36px rgba(30,58,138,0.25);                         /* Blue testimonial card hover */
  --shadow-lift:   0 24px 48px rgba(26,26,26,0.08);                          /* Hovered cards, headshots */
  --shadow-hawk:   0 24px 48px rgba(26,26,26,0.10);                          /* Hawk AI screenshot */
  --shadow-cta:    0 16px 40px rgba(68,164,0,0.18);                          /* Floating "Schedule Demo" pill */
  --shadow-fab:    0 12px 32px rgba(26,26,26,0.10), 0 4px 12px rgba(26,26,26,0.06);
  --shadow-book:   0 30px 50px rgba(45,106,0,0.20);                          /* CMMC Guide book drop */

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* Floating widget pop, CMMC book tilt */
  --dur-fast:      150ms;
  --dur-default:   200ms;
  --dur-slow:      300ms;
  --dur-page:      500ms;

  /* ── Z-index ──────────────────────────────────────────────────── */
  --z-header:  40;
  --z-megamenu: 50;
  --z-fab:     50;
  --z-modal:   100;

  /* ── Wizard semantic surfaces / tints (dark values in :root.dark) ─ */
  --ff-surface:           #FFFFFF;  /* modal panels, cards, footer */
  --ff-surface-2:         #F7F9FD;  /* inset / secondary panels, sticky bars */
  --ff-ink:               var(--ff-black);  /* wizard heading + body ink */
  --ff-tint-blue:         #EEF2FB;  /* avatar / info chip fill */
  --ff-tint-green:        #DCEFC9;  /* positive chip fill */
  --ff-tint-amber:        #FEF3C7;  /* EDITED / warning badge fill */
  --ff-tint-amber-ink:    #92400E;  /* EDITED / warning badge text */
  --ff-tint-amber-border: #F0C84A;  /* EDITED / warning badge border */

  /* Detail-panel (catalog drawer) text — navy on white in light mode */
  --ff-panel-ink:        #1E3A6E;  /* panel title / primary text + links */
  --ff-panel-ink-strong: #162D56;  /* hover / emphasis */
  --ff-panel-muted:      #5A6A8A;  /* subtitle / secondary */
  --ff-panel-faint:      #8896AD;  /* section labels, close affordance */
  --ff-success-ink:      #2F6B34;  /* "already in inventory" notice text */
}

/* =====================================================================
   DARK MODE — activated by MUI's color-scheme class on <html>
   (theme.ts: cssVariables.colorSchemeSelector = 'class' → <html class="dark">).
   Redefines the neutral ramp, surfaces, tints and the wizard ink/surface
   tokens to the approved dark palette (see ff-specs-analysis ENG-718 doc 54
   + eng718-t1-wizard-darkmode prototype). Brand green stays; the navy CTA is
   lightened for contrast. --ff-black is intentionally NOT redefined so the
   inverse "rail" surface stays dark.
   ===================================================================== */
:root.dark {
  /* neutral ramp — inverted */
  --gray-900:  #E9EDF2;
  --gray-700:  #C4CCD6;
  --gray-500:  #9AA4B2;
  --gray-400:  #8A93A0;
  --gray-300:  #475060;
  --gray-200:  #353D48;
  --gray-100:  #2A313B;
  --gray-50:   #1F262E;
  --hairline:  #2A313B;
  --body-text: #CDD4DD;

  /* surfaces + tints */
  --section-tint:         #0F1216;
  --green-tint:           rgba(68, 164, 0, 0.16);
  --gray-tint:            #1B2230;
  --ff-surface:           #1B2026;
  --ff-surface-2:         #232B33;
  --ff-ink:               #EEF1F5;
  --ff-tint-blue:         #243246;
  --ff-tint-green:        rgba(68, 164, 0, 0.20);
  --ff-tint-amber:        #3A2E12;
  --ff-tint-amber-ink:    #FBBF24;
  --ff-tint-amber-border: #7A5C18;

  /* semantic bg */
  --bg-1: #1B2026;

  /* primary CTA — lightened navy for contrast on dark */
  --ff-blue-cta:       #2F6DB5;
  --ff-blue-cta-hover: #295F9E;

  /* detail-panel text — light on the dark drawer surface */
  --ff-panel-ink:        #E6EDF7;
  --ff-panel-ink-strong: #FFFFFF;
  --ff-panel-muted:      #9AA4B2;
  --ff-panel-faint:      #7B8492;
  --ff-success-ink:      #7FD18C;
}

/* =====================================================================
   SEMANTIC TYPE — drop-in classes
   ===================================================================== */
.ff-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ff-green);
  display: inline-block;
}

.ff-h-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ff-black);
}
.ff-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-h1);
  letter-spacing: -0.03em;
  color: var(--ff-black);
}
.ff-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h);
  color: var(--ff-black);
}
.ff-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-tight);
  color: var(--ff-black);
}
.ff-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--gray-500);
  max-width: 52ch;
  text-wrap: pretty;
}
.ff-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body-text);
}
.ff-caption,
.ff-meta {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-cap-tight);
  color: var(--gray-500);
}
.ff-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--green-tint);
  color: var(--ff-dark);
}

/* Green accent on multi-line display headlines */
.ff-h-display .accent,
.ff-h1 .accent,
.ff-h2 .accent { color: var(--ff-green); }