/* Greenkub type scale. Titles are Raleway; everything else is Avenir (self-hosted).
   Sizes come from the Figma float variables (font-size/*) and from the
   values measured on the component boards. */
:root {
  /* Titles — Raleway */
  --gk-title-xl-desktop: 80px; /* @kind font */
  --gk-title-xl-mobile: 44px; /* @kind font */
  --gk-title-lg-desktop: 48px; /* @kind font */
  --gk-title-lg-mobile: 32px; /* @kind font */
  --gk-title-md-desktop: 32px; /* @kind font */
  --gk-title-md-mobile: 20px; /* @kind font */

  /* Cards / body / controls */
  --gk-card-md-desktop: 24px; /* @kind font */
  --gk-card-md-mobile: 18px; /* @kind font */
  --gk-body-md: 16px; /* @kind font */
  --gk-btn-md: 18px; /* @kind font */
  --gk-label-md: 20px; /* @kind font */
  --gk-caption: 14px; /* @kind font */

  /* Weights */
  --gk-w-raleway-semibold: 600; /* @kind font */
  --gk-w-raleway-bold: 700; /* @kind font */
  --gk-w-raleway-extrabold: 800; /* @kind font */
  --gk-w-raleway-black: 900; /* @kind font */
  --gk-w-avenir-light: 300; /* @kind font */
  --gk-w-avenir-roman: 400; /* @kind font */
  --gk-w-avenir-medium: 500; /* @kind font */
  --gk-w-avenir-heavy: 800; /* @kind font */
  --gk-w-avenir-black: 900; /* @kind font */

  /* Line heights seen in the file: titles and controls are set solid,
     running copy at 1.1, spec/prose at 1.6 */
  --gk-lh-solid: 1; /* @kind font */
  --gk-lh-tight: 1.1; /* @kind font */
  --gk-lh-snug: 1.2; /* @kind font */
  --gk-lh-prose: 1.6; /* @kind font */
}

/* Ready-made text roles */
.gk-title-xl { font-family: var(--gk-font-title); font-weight: 900; font-size: var(--gk-title-xl-desktop); line-height: var(--gk-lh-solid); color: var(--gk-text-primary) }
.gk-title-lg { font-family: var(--gk-font-title); font-weight: 800; font-size: var(--gk-title-lg-desktop); line-height: var(--gk-lh-solid); color: var(--gk-text-primary) }
.gk-title-md { font-family: var(--gk-font-title); font-weight: 800; font-size: var(--gk-title-md-desktop); line-height: var(--gk-lh-solid); color: var(--gk-text-primary) }
.gk-eyebrow { font-family: var(--gk-font-title); font-weight: 600; font-size: var(--gk-card-md-desktop); line-height: var(--gk-lh-solid); text-transform: uppercase; color: var(--gk-text-primary) }
.gk-card-title { font-family: var(--gk-font-title); font-weight: 800; font-size: var(--gk-card-md-mobile); line-height: var(--gk-lh-solid); color: var(--gk-text-primary) }
.gk-body { font-family: var(--gk-font-body); font-weight: 400; font-size: var(--gk-body-md); line-height: var(--gk-lh-tight); color: var(--gk-text-primary) }
.gk-body-medium { font-family: var(--gk-font-body); font-weight: 500; font-size: var(--gk-body-md); line-height: var(--gk-lh-tight); color: var(--gk-text-primary) }
.gk-label { font-family: var(--gk-font-title); font-weight: 600; font-size: var(--gk-label-md); line-height: var(--gk-lh-solid) }
.gk-cta-label { font-family: var(--gk-font-body); font-weight: 800; font-size: var(--gk-btn-md); line-height: var(--gk-lh-solid) }
.gk-nav-link { font-family: var(--gk-font-title); font-weight: 700; font-size: var(--gk-body-md); line-height: var(--gk-lh-solid); text-transform: uppercase; color: var(--gk-text-primary) }