@layer gf.theme {
  :root {
    --gf-color-primary: #ff4900;
    --gf-color-secondary: #465665;
    --gf-color-accent: #ff4900;
    --gf-color-dark: #08080a;
    --gf-color-light: #1b1b1f;
    --gf-color-text: #d9d9de;
    --gf-color-on-light: #d9d9de;
    --gf-color-bg: #111113;
    --gf-color-on-dark: #ffffff;
    --gf-aurora-1: #ff4900;
    --gf-aurora-2: #ff9a3c;
    --gf-aurora-3: #3b4cff;
    --gf-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --gf-font-heading: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --gf-font-weight-heading: 700;
    --gf-root-font-size: 100%;
    --gf-text-size: clamp(1.0625rem, 1.0136rem + 0.2174vw, 1.1875rem);
    --gf-h1-size: clamp(2.375rem, 1.5924rem + 3.4783vw, 4.375rem);
    --gf-h2-size: clamp(1.75rem, 1.2609rem + 2.1739vw, 3rem);
    --gf-h3-size: clamp(1.375rem, 1.1793rem + 0.8696vw, 1.875rem);
    --gf-h4-size: clamp(1.125rem, 1.0272rem + 0.4348vw, 1.375rem);
    --gf-header-min-height: clamp(4.5rem, 3.913rem + 2.6087vw, 6rem);
    --gf-header-bg: var(--gf-color-bg);
    --gf-header-color: var(--gf-color-text);
    --gf-nav-color: var(--gf-color-on-dark);
    --gf-nav-color-active: var(--gf-color-accent);
    --gf-nav-mobile-bg: var(--gf-color-dark);
    --gf-footer-bg: var(--gf-color-light);
    --gf-footer-color: var(--gf-color-text);
    --gf-bottom-bg: var(--gf-color-dark);
    --gf-bottom-color: var(--gf-color-on-dark);
    --gf-icon-color: var(--gf-color-accent);
    --gf-container: 90rem;
    --gf-container-narrow: 56rem;
    --gf-radius: 0.75rem;
    --gf-nav-font-size: 1rem;
    --gf-nav-font-size-mobile: 1.125rem;
    --gf-icon-size-s: 2.75rem;
    --gf-icon-size-m: 3.5rem;
    --gf-icon-size-l: 5rem;
  }
}