:root {
  --lf-font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --lf-font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Neutral foundation: color behaves as light inside a black environment. */
  --lf-black: #030304;
  --lf-charcoal-950: #070708;
  --lf-charcoal-900: #0b0c0d;
  --lf-charcoal-850: #101112;
  --lf-charcoal-800: #151718;
  --lf-emerald-700: #087847;
  --lf-emerald-600: #0f9f60;
  --lf-emerald-500: #22bf76;
  --lf-green-400: #66d99a;
  --lf-lime-300: #b6df72;
  --lf-mint-100: #dff6e8;
  --lf-cream: #f3f2ed;
  --lf-teal: #3bafa8;
  --lf-blue-muted: #3b6f91;

  --lf-bg-canvas: var(--lf-charcoal-950);
  --lf-bg-canvas-deep: var(--lf-black);
  --lf-bg-soft: var(--lf-charcoal-900);
  --lf-surface: rgba(15, 16, 17, 0.84);
  --lf-surface-solid: #0e1010;
  --lf-surface-strong: #f0f2ed;
  --lf-text: #f5f5f2;
  --lf-text-soft: #a7aaa7;
  --lf-text-faint: #6f7471;
  --lf-text-inverse: #080a09;
  --lf-accent: var(--lf-emerald-500);
  --lf-accent-strong: #69d99b;
  --lf-accent-soft: #10231a;
  --lf-success: #64d797;
  --lf-border: rgba(255, 255, 255, 0.075);
  --lf-border-strong: rgba(255, 255, 255, 0.13);

  /* Localized gradients: all resolve back into black or charcoal. */
  --lf-brand-gradient: linear-gradient(135deg, #f4f5f1 0%, #dfe9e2 100%);
  --lf-hero-gradient:
    radial-gradient(circle at 50% 24%, rgba(34, 191, 118, 0.09), transparent 25rem),
    radial-gradient(circle at 87% 46%, rgba(59, 111, 145, 0.045), transparent 23rem),
    linear-gradient(180deg, #050606 0%, #070808 56%, #050506 100%);
  --lf-card-gradient-a:
    radial-gradient(circle at 78% 12%, rgba(34, 191, 118, 0.2), transparent 34%),
    linear-gradient(145deg, #111413 0%, #090b0a 100%);
  --lf-card-gradient-b:
    radial-gradient(circle at 12% 88%, rgba(17, 116, 70, 0.24), transparent 40%),
    linear-gradient(145deg, #121513 0%, #080a09 100%);
  --lf-card-gradient-c:
    radial-gradient(circle at 82% 16%, rgba(59, 175, 168, 0.2), transparent 35%),
    linear-gradient(145deg, #111515 0%, #080a0b 100%);
  --lf-card-gradient-d:
    radial-gradient(circle at 16% 18%, rgba(59, 111, 145, 0.2), transparent 38%),
    linear-gradient(145deg, #111315 0%, #08090a 100%);
  --lf-card-gradient-e:
    radial-gradient(circle at 78% 16%, rgba(182, 223, 114, 0.16), transparent 26%),
    radial-gradient(circle at 20% 84%, rgba(15, 159, 96, 0.15), transparent 36%),
    linear-gradient(145deg, #111411 0%, #080a09 100%);
  --lf-gradient-page: #050506;
  --lf-gradient-hero: var(--lf-hero-gradient);
  --lf-gradient-demo:
    radial-gradient(circle at 18% 22%, rgba(34, 191, 118, 0.12), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(59, 175, 168, 0.075), transparent 36%),
    linear-gradient(145deg, #131615 0%, #090b0a 52%, #070808 100%);
  --lf-gradient-cta:
    radial-gradient(circle at 9% 10%, rgba(34, 191, 118, 0.13), transparent 32%),
    radial-gradient(circle at 91% 86%, rgba(59, 111, 145, 0.09), transparent 38%),
    linear-gradient(145deg, #111312 0%, #070808 100%);

  --lf-radius-sm: 12px;
  --lf-radius-md: 18px;
  --lf-radius-lg: 28px;
  --lf-radius-xl: 42px;
  --lf-radius-pill: 999px;

  --lf-shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.34);
  --lf-shadow-card: 0 28px 80px rgba(0, 0, 0, 0.48);
  --lf-shadow-media: 0 46px 120px rgba(0, 0, 0, 0.62);
  --lf-shadow-button: 0 12px 32px rgba(0, 0, 0, 0.4);

  --lf-space-1: 4px;
  --lf-space-2: 8px;
  --lf-space-3: 12px;
  --lf-space-4: 16px;
  --lf-space-5: 24px;
  --lf-space-6: 32px;
  --lf-space-7: 48px;
  --lf-space-8: 64px;
  --lf-space-9: 96px;
  --lf-space-10: 144px;

  --lf-container: clamp(1180px, 68vw, 1360px);
  --lf-container-wide: clamp(1320px, 72vw, 1520px);
  --lf-copy: clamp(680px, 36vw, 740px);
  --lf-page-x: clamp(20px, 5vw, 80px);
  --lf-section-y: clamp(88px, min(11vw, calc(136px + 1vw)), 176px);
  --lf-button-h: clamp(52px, calc(47px + 0.36vw), 56px);
  --lf-action-w: clamp(132px, calc(121px + 0.8vw), 142px);
  --lf-controller-width: clamp(320px, calc(265px + 4vw), 360px);
  --lf-controller-half: clamp(160px, calc(132.5px + 2vw), 180px);

  --lf-text-xs: 12px;
  --lf-text-sm: 14px;
  --lf-text-base: clamp(16px, min(1.25vw, calc(15px + 0.2vw)), 20px);
  --lf-text-lg: clamp(20px, min(2vw, calc(22px + 0.25vw)), 30px);
  --lf-heading-sm: clamp(34px, min(5vw, calc(44px + 1vw)), 66px);
  --lf-heading-lg: clamp(58px, min(8.8vw, calc(89px + 1vw)), 116px);
  --lf-leading-body: 1.65;
  --lf-leading-heading: 0.92;
}