/* =====================================================================
 * GeoComply — Tokens (colors & type)
 * Drop into any project. All other component CSS in geocomply.css
 * builds on these variables.
 *
 * Fonts:
 *   - Inter is loaded LOCALLY from fonts/Inter-VariableFont.ttf (variable, 100–900).
 *   - ES Rebond Grotesque (Klim Type Foundry, licensed) is loaded LOCALLY
 *     from fonts/ESRebondGrotesque-*.woff — Light/Regular/Medium/Bold +
 *     italics. Used for display type and headings.
 * ===================================================================*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-VariableFont.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont.ttf") format("truetype");
}

/* ES Rebond Grotesque — Klim Type Foundry (licensed) ------------------ */
@font-face {
  font-family: "ES Rebond Grotesque";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/ESRebondGrotesque-Light.woff") format("woff");
}
@font-face {
  font-family: "ES Rebond Grotesque";
  font-style: italic; font-weight: 300; font-display: swap;
  src: url("fonts/ESRebondGrotesque-LightItalic.woff") format("woff");
}
@font-face {
  font-family: "ES Rebond Grotesque";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ESRebondGrotesque-Regular.woff") format("woff");
}
@font-face {
  font-family: "ES Rebond Grotesque";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/ESRebondGrotesque-Italic.woff") format("woff");
}
@font-face {
  font-family: "ES Rebond Grotesque";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ESRebondGrotesque-Medium.woff") format("woff");
}
@font-face {
  font-family: "ES Rebond Grotesque";
  font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/ESRebondGrotesque-MediumItalic.woff") format("woff");
}
@font-face {
  font-family: "ES Rebond Grotesque";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ESRebondGrotesque-Bold.woff") format("woff");
}
@font-face {
  font-family: "ES Rebond Grotesque";
  font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/ESRebondGrotesque-BoldItalic.woff") format("woff");
}

:root {
  /* ---------- COLOR · brand --------------------------------------- */
  --gc-navy-900:        #04003a;   /* deepest navy — full-bleed dark */
  --gc-navy-800:        #0a003c;   /* SPACE NAVY · primary           */
  --gc-navy-700:        #1a134f;
  --gc-navy-600:        #2a2360;

  --gc-blue-700:        #0034c2;
  --gc-blue-600:        #0046fc;   /* GEOCOMPLY BLUE                 */
  --gc-blue-500:        #0041ed;   /* link / CTA hover               */
  --gc-blue-300:        #4d9aff;
  --gc-blue-200:        #a3b7ff;
  --gc-blue-100:        #d1e5ff;

  --gc-orange-700:      #d44d09;
  --gc-orange-500:      #ff600f;   /* GEOCOMPLY ORANGE · accent only */
  --gc-orange-300:      #ff8a4a;
  --gc-orange-100:      #ffe4d2;

  /* ---------- COLOR · neutrals ------------------------------------ */
  --gc-white:           #ffffff;
  --gc-cloud-300:       #f4f7fa;   /* CLOUD GREY · soft surface      */
  --gc-cloud-200:       #f3f7fa;
  --gc-cloud-100:       #fafcfd;

  --gc-titanium-900:    #2a3138;
  --gc-titanium-800:    #4a545d;
  --gc-titanium-700:    #66727e;   /* default muted body             */
  --gc-titanium-300:    #a0afbe;
  --gc-titanium-100:    #dfe3e8;   /* default border                 */

  /* ---------- COLOR · functional --------------------------------- */
  --gc-green-500:       #00cd91;
  --gc-pink-500:        #e8178a;
  --gc-yellow-500:      #ffc847;

  /* ---------- COLOR · semantic aliases --------------------------- */
  --gc-bg:              var(--gc-white);
  --gc-bg-soft:         var(--gc-cloud-300);
  --gc-bg-dark:         var(--gc-navy-800);
  --gc-bg-blue:         var(--gc-blue-600);

  --gc-text:            var(--gc-navy-800);
  --gc-text-muted:      var(--gc-titanium-700);
  --gc-text-on-dark:    var(--gc-cloud-300);
  --gc-text-on-dark-muted: var(--gc-blue-200);

  --gc-border:          var(--gc-titanium-100);
  --gc-accent:          var(--gc-orange-500);
  --gc-link:            var(--gc-blue-500);

  /* ---------- TYPE · families ------------------------------------ */
  --gc-font-display:    "ES Rebond Grotesque", "Inter", system-ui, -apple-system, sans-serif;
  --gc-font-body:       "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gc-font-mono:       "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE · scale --------------------------------------- */
  --gc-fs-display-1:    84px;
  --gc-fs-display-2:    54px;
  --gc-fs-display-3:    42px;
  --gc-fs-h1:           42px;
  --gc-fs-h2:           33px;
  --gc-fs-h3:           24px;
  --gc-fs-h4:           20px;
  --gc-fs-h5:           16.5px;
  --gc-fs-body-l:       21.5px;
  --gc-fs-body-m:       17px;
  --gc-fs-body-s:       15px;
  --gc-fs-eyebrow:      13.25px;
  --gc-fs-button:       16px;

  --gc-lh-display-1:    80px;
  --gc-lh-display-2:    56px;
  --gc-lh-display-3:    48px;
  --gc-lh-h2:           40px;
  --gc-lh-h3:           32px;
  --gc-lh-body-l:       28px;
  --gc-lh-body-m:       24px;
  --gc-lh-body-s:       22px;
  --gc-lh-button:       1;

  --gc-tracking-display: -0.005em;
  --gc-tracking-eyebrow:  0.08em;
  --gc-tracking-button:   0.01em;

  --gc-fw-light:        300;
  --gc-fw-regular:      400;
  --gc-fw-medium:       500;
  --gc-fw-bold:         700;

  /* ---------- SPACE / RADIUS / SHADOW ---------------------------- */
  --gc-space-1:  4px;   --gc-space-2:  8px;   --gc-space-3: 12px;
  --gc-space-4: 16px;   --gc-space-5: 24px;   --gc-space-6: 32px;
  --gc-space-7: 40px;   --gc-space-8: 48px;   --gc-space-9: 64px;
  --gc-space-10: 80px;  --gc-space-11: 96px;  --gc-space-12: 120px;

  --gc-radius-sm:    8px;
  --gc-radius-md:    16px;
  --gc-radius-lg:    24px;
  --gc-radius-pill: 100px;

  --gc-shadow-sm: 0 1px 2px rgba(10,0,60,.06);
  --gc-shadow-md: 0 6px 24px rgba(10,0,60,.08);
  --gc-shadow-lg: 0 24px 60px rgba(10,0,60,.12);

  --gc-dur:      200ms;
  --gc-dur-fast: 120ms;
  --gc-ease:     cubic-bezier(.2,.7,.2,1);
}

/* =====================================================================
 * Semantic type classes — usable on their own without geocomply.css
 * ===================================================================*/

.gc-display-1 { font-family: var(--gc-font-display); font-weight: var(--gc-fw-light);
  font-size: var(--gc-fs-display-1); line-height: var(--gc-lh-display-1);
  letter-spacing: var(--gc-tracking-display); color: var(--gc-text); }
.gc-display-2 { font-family: var(--gc-font-display); font-weight: var(--gc-fw-light);
  font-size: var(--gc-fs-display-2); line-height: var(--gc-lh-display-2);
  letter-spacing: var(--gc-tracking-display); color: var(--gc-text); }
.gc-display-3 { font-family: var(--gc-font-display); font-weight: var(--gc-fw-regular);
  font-size: var(--gc-fs-display-3); line-height: var(--gc-lh-display-3);
  color: var(--gc-text); }
.gc-h1 { font-family: var(--gc-font-display); font-weight: var(--gc-fw-regular);
  font-size: var(--gc-fs-h1); line-height: var(--gc-lh-display-3); color: var(--gc-text); }
.gc-h2 { font-family: var(--gc-font-display); font-weight: var(--gc-fw-regular);
  font-size: var(--gc-fs-h2); line-height: var(--gc-lh-h2); color: var(--gc-text); }
.gc-h3 { font-family: var(--gc-font-display); font-weight: var(--gc-fw-medium);
  font-size: var(--gc-fs-h3); line-height: var(--gc-lh-h3); color: var(--gc-text); }
.gc-h4 { font-family: var(--gc-font-display); font-weight: var(--gc-fw-medium);
  font-size: var(--gc-fs-h4); line-height: 28px; color: var(--gc-text); }
.gc-h5 { font-family: var(--gc-font-display); font-weight: var(--gc-fw-medium);
  font-size: var(--gc-fs-h5); line-height: 24px; color: var(--gc-text); }
.gc-body-l { font-family: var(--gc-font-body); font-weight: var(--gc-fw-light);
  font-size: var(--gc-fs-body-l); line-height: var(--gc-lh-body-l); color: var(--gc-text); }
.gc-body-m { font-family: var(--gc-font-body); font-weight: var(--gc-fw-regular);
  font-size: var(--gc-fs-body-m); line-height: var(--gc-lh-body-m); color: var(--gc-text); }
.gc-body-s { font-family: var(--gc-font-body); font-weight: var(--gc-fw-regular);
  font-size: var(--gc-fs-body-s); line-height: var(--gc-lh-body-s); color: var(--gc-text); }
.gc-eyebrow {
  font-family: var(--gc-font-body); font-weight: var(--gc-fw-bold);
  font-size: var(--gc-fs-eyebrow); line-height: 16px;
  letter-spacing: var(--gc-tracking-eyebrow); text-transform: uppercase;
  color: var(--gc-blue-500); display: inline-block;
}
.gc-text-muted   { color: var(--gc-text-muted); }
.gc-text-on-dark { color: var(--gc-text-on-dark); }