/* ============================================================================
   ITEPL Brand — Typography Tokens
   Indian Transformers and Electricals Pvt. Ltd.

   Typeface: Google Sans Flex with a documented fallback stack.
   Load Google Sans Flex via Google Fonts or self-host into brand/assets/fonts/.
   Build hierarchy with size and weight; reserve orange for emphasis only.
   ============================================================================ */

:root {
  /* --- Font families ----------------------------------------------------
     Google Sans Flex is the primary typeface. The fallback stack keeps the
     UI on-brand while the webfont loads or if it is unavailable. */
  --ite-font-sans: "Google Sans Flex", "Google Sans", -apple-system,
                   BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
                   sans-serif;
  /* Display face — pairs with the sans (headings and body never share a
     face). CONFIRMED: Space Grotesk — chosen June 2026 from the candidates
     documented on /site/typography.html. */
  --ite-font-display: "Space Grotesk", "Google Sans Flex", -apple-system,
                   BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
                   sans-serif;
  --ite-font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, "SF Mono",
                   Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Weights ---------------------------------------------------------- */
  --ite-weight-regular:  400;
  --ite-weight-medium:   500;
  --ite-weight-semibold: 600;
  --ite-weight-bold:     700;

  /* --- Type scale (rem, 16px base) -------------------------------------- */
  /* Sub-12px UI micro sizes — dense chrome labels, badges, mono captions and
     engineering chips. Kept in rem (≡ px at the 16px root) so they scale with
     the user's base size; promoted from hardcoded px so nothing sits below the
     scale. Reserve for non-body UI metadata, never running text. */
  --ite-text-micro: 0.5625rem; /* 9px  */
  --ite-text-3xs:   0.625rem;  /* 10px */
  --ite-text-2xs:   0.6875rem; /* 11px */
  --ite-text-xs:   0.75rem;   /* 12px */
  --ite-text-sm:   0.875rem;  /* 14px */
  --ite-text-base: 1rem;      /* 16px — body */
  --ite-text-lg:   1.125rem;  /* 18px */
  --ite-text-xl:   1.25rem;   /* 20px */
  --ite-text-2xl:  1.5rem;    /* 24px */
  --ite-text-3xl:  1.875rem;  /* 30px */
  --ite-text-4xl:  2.25rem;   /* 36px */
  --ite-text-5xl:  3rem;      /* 48px */
  --ite-text-6xl:  3.75rem;   /* 60px */

  /* --- Line heights ----------------------------------------------------- */
  --ite-leading-tight:   1.15;
  --ite-leading-snug:    1.3;
  --ite-leading-normal:  1.5;
  --ite-leading-relaxed: 1.7;

  /* --- Letter spacing --------------------------------------------------- */
  --ite-tracking-tight:   -0.02em;
  --ite-tracking-display: -0.03em;  /* large display headings only */
  --ite-tracking-normal:  0;
  --ite-tracking-wide:    0.04em;
  --ite-tracking-caps:    0.08em;
}

/* ----------------------------------------------------------------------------
   Utility classes — apply these instead of styling headings ad hoc.
   ---------------------------------------------------------------------------- */
.ite-display {
  font-family: var(--ite-font-display);
  font-size: var(--ite-text-6xl);
  font-weight: var(--ite-weight-bold);
  line-height: var(--ite-leading-tight);
  letter-spacing: var(--ite-tracking-display);
}
.ite-h1 {
  font-family: var(--ite-font-display);
  font-size: var(--ite-text-4xl);
  font-weight: var(--ite-weight-bold);
  line-height: var(--ite-leading-tight);
  letter-spacing: var(--ite-tracking-display);
}
.ite-h2 {
  font-family: var(--ite-font-display);
  font-size: var(--ite-text-3xl);
  font-weight: var(--ite-weight-semibold);
  line-height: var(--ite-leading-snug);
  letter-spacing: var(--ite-tracking-tight);
}
.ite-h3 {
  font-family: var(--ite-font-display);
  font-size: var(--ite-text-2xl);
  font-weight: var(--ite-weight-semibold);
  line-height: var(--ite-leading-snug);
}
.ite-h4 {
  font-family: var(--ite-font-sans);
  font-size: var(--ite-text-xl);
  font-weight: var(--ite-weight-medium);
  line-height: var(--ite-leading-snug);
}
.ite-body-lg {
  font-family: var(--ite-font-sans);
  font-size: var(--ite-text-lg);
  font-weight: var(--ite-weight-regular);
  line-height: var(--ite-leading-relaxed);
}
.ite-body {
  font-family: var(--ite-font-sans);
  font-size: var(--ite-text-base);
  font-weight: var(--ite-weight-regular);
  line-height: var(--ite-leading-normal);
}
.ite-caption {
  font-family: var(--ite-font-sans);
  font-size: var(--ite-text-sm);
  font-weight: var(--ite-weight-regular);
  line-height: var(--ite-leading-normal);
  color: var(--ite-color-text-muted);
}
.ite-overline {
  font-family: var(--ite-font-sans);
  font-size: var(--ite-text-xs);
  font-weight: var(--ite-weight-semibold);
  line-height: var(--ite-leading-normal);
  letter-spacing: var(--ite-tracking-caps);
  text-transform: uppercase;
}
.ite-mono {
  font-family: var(--ite-font-mono);
  font-size: var(--ite-text-sm);
}

/* ----------------------------------------------------------------------------
   Self-hosted typefaces — [BRAND EVOLUTION] Gate 3 Q6 — activated 2026-06-12.
   woff2 files live in brand/assets/fonts/. Remove the two Google Fonts <link>s
   from base.njk in C3 once this is active.

   font-display: optional — eliminates FOUT/LCP-shift on 4G; browser uses the
   fallback if the font is not cached on first paint. Pair with size-adjust +
   ascent/descent-override metric-matched fallbacks so layout is stable.

   Preload the LCP display face (Space Grotesk 600) in base.njk <head> (C3).
   ---------------------------------------------------------------------------- */

/* Google Sans Flex — primary sans (variable, wght 100–900) ------------------- */
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/GoogleSansFlex.woff2") format("woff2");
  /* Metric-matched fallback: -apple-system (San Francisco) is close in
     x-height and advance width. size-adjust nudges cap-height to match,
     keeping line boxes stable while the woff2 loads. */
  size-adjust: 101%;
  ascent-override: 90%;
  descent-override: 23%;
  line-gap-override: 0%;
}

/* Space Grotesk — display/heading face (600, 700) ---------------------------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/SpaceGrotesk-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 100%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/SpaceGrotesk-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 100%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Google Sans Code — monospace face (latin, all weights share one file) ------ */
/* Folded into --ite-font-mono stack (P5-3). The .mono class resolves via
   font-family: var(--ite-font-mono) — no per-page hardcode needed. */
@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/GoogleSansCode.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}