/* ============================================================================
   Go Nimbly Design System — Design Tokens (CSS custom properties)
   ----------------------------------------------------------------------------
   Extracted from the production gonimbly.com Webflow build. All token VALUES are
   source-accurate; the --gn-* names are a stable, framework-agnostic rename of
   Webflow's internal swatch/spacing/typography variables.

   Drop this file in first, then build with var(--gn-*) everywhere. Pair it with
   gonimbly-base.css for ready-made element + component styling.

   Fluid sizes use the site's fluid formula, interpolating linearly between a
   320px (20rem) and 1440px (90rem) viewport:
       clamp(MIN, MIN + (MAX-MIN) * (100vw - 20rem) / 70, MAX)
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------- */
  --gn-color-brand: #c6fb50;        /* signature lime — primary accent / CTA      */
  --gn-color-brand-hover: #9ec940;  /* brand mixed with 20% black (hover/pressed)  */

  /* ---- Neutrals ----------------------------------------------------------
     Official names in parentheses (from the 2026 brand guidelines).            */
  --gn-color-paper: #fcfcfc;        /* Paper White — default page background       */
  --gn-color-paper-gray: #fffdf9;   /* Paper Gray — warm off-white surface         */
  --gn-color-white: #ffffff;
  --gn-color-black: #000000;        /* Toner Black Dark — text + borders + contrast */
  --gn-color-ink: #1f1d1e;          /* website near-black (dark-section surface)    */
  --gn-color-ink-800: #2f2b2d;      /* secondary dark surface                       */
  --gn-color-gray-100: #f1f1f1;     /* Toner Black 005 — subtle fills / hairlines   */
  --gn-color-gray-200: #efece9;     /* Toner Black 010 — light surface              */
  --gn-color-gray-300: #dcd5cc;     /* Toner Black 020 — borders on light surfaces  */
  --gn-color-gray-500: #909090;     /* Toner Black Medium — muted / disabled text   */

  /* ---- Semantic text -----------------------------------------------------
     Brand rule: "use black for ~95% of all text on white/light backgrounds."
     Override to var(--gn-color-ink) for the softer website look (see web-style). */
  --gn-color-text: var(--gn-color-black);

  /* ---- Tonal accent families (light · medium · dark) --------------------- */
  --gn-color-green-light: #d4ffa9;
  --gn-color-green: #a7f35a;
  --gn-color-green-dark: #213029;
  --gn-color-purple-light: #f1dafe;
  --gn-color-purple: #d07cff;
  --gn-color-purple-dark: #34203f;
  --gn-color-yellow-light: #fef7aa;
  --gn-color-yellow-medium: #ff9523;  /* official Yellow Medium accent */
  --gn-color-yellow-soft: #ffd6aa;    /* website-only warm tint        */
  --gn-color-blue-light: #bfe5fe;
  --gn-color-blue: #5cb0ea;
  --gn-color-blue-dark: #002036;

  /* ---- Semantic ---------------------------------------------------------- */
  --gn-color-error: #ea384c;
  --gn-color-link: #0082f3;         /* also the focus-ring color                    */

  /* ---- Type families ----------------------------------------------------- */
  /* Faculty Glyphic is free on Google Fonts. ABC Monument Grotesk is a paid    */
  /* Dinamo license — the fallbacks keep unlicensed projects close to on-brand. */
  --gn-font-display: "Faculty Glyphic", "Times New Roman", Georgia, serif;
  --gn-font-body: "ABC Monument Grotesk", "Space Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gn-font-mono: "ABC Monument Grotesk Mono", "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Font weights ------------------------------------------------------ */
  --gn-weight-regular: 400;
  --gn-weight-medium: 500;
  --gn-weight-bold: 700;

  /* ---- Type scale (fluid display + headings, fixed text) ----------------- */
  --gn-text-display-1: clamp(5rem, calc(5rem + 7.5 * (100vw - 20rem) / 70), 12.5rem);     /* 80 → 200px  */
  --gn-text-display-2: clamp(4rem, calc(4rem + 3.5 * (100vw - 20rem) / 70), 7.5rem);       /* 64 → 120px  */
  --gn-text-display-3: clamp(3rem, calc(3rem + 2.125 * (100vw - 20rem) / 70), 5.125rem);   /* 48 → 82px   */
  --gn-text-h1: clamp(3rem, calc(3rem + 2.625 * (100vw - 20rem) / 70), 5.625rem);          /* 48 → 90px   */
  --gn-text-h2: clamp(2.5rem, calc(2.5rem + 2 * (100vw - 20rem) / 70), 4.5rem);            /* 40 → 72px   */
  --gn-text-h3: clamp(2.25rem, calc(2.25rem + 1.25 * (100vw - 20rem) / 70), 3.5rem);       /* 36 → 56px   */
  --gn-text-h4: clamp(2.125rem, calc(2.125rem + 0.875 * (100vw - 20rem) / 70), 3rem);      /* 34 → 48px   */
  --gn-text-h5: clamp(2rem, calc(2rem + 0.5 * (100vw - 20rem) / 70), 2.5rem);              /* 32 → 40px   */
  --gn-text-h6: clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 20rem) / 70), 2rem);            /* 24 → 32px   */
  --gn-text-subhead-1: 1.5rem;      /* 24px */
  --gn-text-subhead-2: 1.25rem;     /* 20px */
  --gn-text-subhead-3: clamp(1rem, calc(1rem + 0.125 * (100vw - 20rem) / 70), 1.125rem);   /* 16 → 18px  */
  --gn-text-body-lg: 1.125rem;      /* 18px — paragraph-1 */
  --gn-text-body: 1rem;             /* 16px — paragraph-2 (base) */
  --gn-text-body-sm: 0.875rem;      /* 14px — paragraph-3 */
  --gn-text-body-xs: 0.75rem;       /* 12px — paragraph-4 */
  --gn-text-label-1: 1rem;          /* 16px */
  --gn-text-label-2: 0.75rem;       /* 12px */
  --gn-text-label-3: 0.5rem;        /* 8px  — micro labels / eyebrow */

  /* ---- Line heights ------------------------------------------------------ */
  --gn-leading-none: 1;       /* display headlines        */
  --gn-leading-tight: 1.1;    /* large display            */
  --gn-leading-snug: 1.2;     /* headings                 */
  --gn-leading-heading: 1.3;
  --gn-leading-subhead: 1.4;
  --gn-leading-normal: 1.5;   /* body default             */
  --gn-leading-relaxed: 1.6;
  --gn-leading-loose: 1.7;    /* long-form paragraphs     */

  /* ---- Letter spacing ---------------------------------------------------- */
  --gn-tracking-tight: -0.03em;   /* display text          */
  --gn-tracking-snug: -0.01em;    /* headlines             */
  --gn-tracking-normal: 0em;      /* body                  */

  /* ---- Spacing scale (fluid) --------------------------------------------- */
  --gn-space-1: clamp(0.375rem, calc(0.375rem + 0.125 * (100vw - 20rem) / 70), 0.5rem);    /* 6 → 8px    */
  --gn-space-2: clamp(0.625rem, calc(0.625rem + 0.125 * (100vw - 20rem) / 70), 0.75rem);   /* 10 → 12px  */
  --gn-space-3: clamp(0.875rem, calc(0.875rem + 0.125 * (100vw - 20rem) / 70), 1rem);      /* 14 → 16px  */
  --gn-space-4: clamp(1.25rem, calc(1.25rem + 0.25 * (100vw - 20rem) / 70), 1.5rem);       /* 20 → 24px  */
  --gn-space-5: clamp(1.75rem, calc(1.75rem + 0.25 * (100vw - 20rem) / 70), 2rem);         /* 28 → 32px  */
  --gn-space-6: clamp(2rem, calc(2rem + 0.5 * (100vw - 20rem) / 70), 2.5rem);              /* 32 → 40px  */
  --gn-space-7: clamp(2.25rem, calc(2.25rem + 0.75 * (100vw - 20rem) / 70), 3rem);         /* 36 → 48px  */
  --gn-space-8: clamp(2.5rem, calc(2.5rem + 1.5 * (100vw - 20rem) / 70), 4rem);            /* 40 → 64px  */

  /* ---- Section / layout rhythm ------------------------------------------- */
  --gn-section-sm: clamp(3rem, calc(3rem + 2 * (100vw - 20rem) / 70), 5rem);               /* 48 → 80px   */
  --gn-section: clamp(4rem, calc(4rem + 2.25 * (100vw - 20rem) / 70), 6.25rem);            /* 64 → 100px  */
  --gn-section-lg: clamp(5.5rem, calc(5.5rem + 4.5 * (100vw - 20rem) / 70), 10rem);        /* 88 → 160px  */
  --gn-section-page-top: clamp(10rem, calc(10rem + 3.1875 * (100vw - 20rem) / 70), 13.1875rem); /* 160 → 211px */
  --gn-site-margin: clamp(1rem, calc(1rem + 1.5 * (100vw - 20rem) / 70), 2.5rem);          /* 16 → 40px   */
  --gn-site-gutter: 1rem;
  --gn-max-width: 90rem;            /* 1440px — main content column max */
  --gn-max-width-content: 50rem;    /* 800px — narrow reading column    */
  --gn-columns: 12;

  /* ---- Radius ------------------------------------------------------------ */
  --gn-radius-1: 0.0625rem;   /* 1px — buttons, near-square         */
  --gn-radius-2: 0.25rem;     /* 4px — inputs, small components     */
  --gn-radius-3: 0.5rem;      /* 8px — cards, containers            */
  --gn-radius-pill: 100vw;    /* fully rounded — pills, badges      */

  /* ---- Borders & focus --------------------------------------------------- */
  --gn-border-width: 0.094rem;      /* ~1.5px primary stroke */
  --gn-focus-width: 0.125rem;       /* 2px outline           */
  --gn-focus-offset: 0.1875rem;     /* 3px offset            */
  --gn-focus-color: #0082f3;

  /* ---- Component metrics ------------------------------------------------- */
  --gn-nav-height: 4rem;            /* 64px */
  --gn-button-height-md: 3rem;      /* 48px */
  --gn-button-height-lg: 5rem;      /* 80px */
}