/* ==========================================================================
   FGX — Type system (project-wide)

   The single source of truth for fonts and the fluid type scale used across
   the FGX Unified Theme. Load this on ANY page — before any page-specific
   stylesheet — to get the Funnel Display / DM Sans pairing and a consistent
   set of heading/body sizes.

   <link rel="stylesheet" href="/assets/fgx/fgx-type.css">

   What lives here vs. what doesn't:
   - @font-face declarations and the --fgx-font-* / --fgx-size-* tokens are
     the canonical source. ui-ux.css (and anything built on it — landing.css,
     index-claude.css, future pages) should reference these tokens rather
     than redeclaring fonts or hardcoding clamp() sizes of its own.
   - Colour, grid, buttons, components etc. stay out of this file on purpose
     — those are per-theme (ui-ux/, index-landing, homepage) and don't
     belong in a type sheet every page loads.

   Two ways to use it:
   1. Standalone, on a page with no other design system: add class
      "fgx-type" to <body> and use .fgx-h1–.fgx-h4, .fgx-lead, .fgx-body,
      .fgx-label / .fgx-eyebrow / .fgx-caption directly. Headings inherit
      colour from their context, so they work on light or dark backgrounds.
   2. As the base for a richer system (this is how ui-ux.css/landing.css/
      index-claude.css use it today): keep your own component classes
      (.ux-h2 etc.) but point their font-family/font-size at the
      --fgx-font-* and --fgx-size-* variables instead of hardcoding new ones,
      so every page stays on the same scale.
   ========================================================================== */

@font-face { font-family: "DM Sans"; src: url("/assets/fgx/fonts/dm-sans-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("/assets/fgx/fonts/funnel-display-variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
  /* Font stacks */
  --fgx-font-display: "Funnel Display", "DM Sans", system-ui, sans-serif;
  --fgx-font-text: "DM Sans", system-ui, sans-serif;
  --fgx-ease: cubic-bezier(.16, 1, .3, 1);

  /* Fluid type scale — shared by every FGX page. Change a value here and it
     ripples through everything that references it (.fgx-h*, .ux-h*, ...). */
  --fgx-size-h1: clamp(56px, 9vw, 180px);
  --fgx-size-h2: clamp(44px, 7.4vw, 150px);
  --fgx-size-h2-sm: clamp(40px, 5.6vw, 110px);
  --fgx-size-h3: clamp(34px, 3.6vw, 68px);
  --fgx-size-h4: clamp(28px, 2.4vw, 44px);
  --fgx-size-lead: clamp(19px, 1.7vw, 30px);
  --fgx-size-body: clamp(16px, 1.1vw, 20px);
  --fgx-size-label: 12px;
}

/* ---------- Standalone utilities (opt in with <body class="fgx-type">) --- */
.fgx-type { font-family: var(--fgx-font-text); font-weight: 500; letter-spacing: -.02em; -webkit-font-smoothing: antialiased; }
.fgx-type :where(h1, h2, h3, h4) { margin: 0; font-family: var(--fgx-font-display); font-weight: 600; }

.fgx-h1 { font-size: var(--fgx-size-h1); line-height: .96; letter-spacing: -.045em; }
.fgx-h2 { font-size: var(--fgx-size-h2); line-height: .98; letter-spacing: -.045em; }
.fgx-h2--sm { font-size: var(--fgx-size-h2-sm); }
.fgx-h3 { font-size: var(--fgx-size-h3); line-height: 1; letter-spacing: -.04em; margin-bottom: 22px; }
.fgx-h4 { font-size: var(--fgx-size-h4); line-height: 1.05; letter-spacing: -.035em; margin-bottom: 14px; }

.fgx-lead { font-size: var(--fgx-size-lead); line-height: 1.25; letter-spacing: -.025em; max-width: 30ch; }
.fgx-body { font-size: var(--fgx-size-body); line-height: 1.5; letter-spacing: -.015em; max-width: 46ch; }
.fgx-body + .fgx-body { margin-top: 1.1em; }

.fgx-label, .fgx-eyebrow, .fgx-caption {
  font-family: var(--fgx-font-text);
  font-size: var(--fgx-size-label);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}