@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}

:root {

  --rg-red:        #FA4616;
  --rg-orange:     #FF8200;
  --rg-black:      #212322;

  --rg-pantone-172: var(--rg-red);
  --rg-pantone-151: var(--rg-orange);
  --rg-pantone-419: var(--rg-black);

  --rg-ink:        #212322;
  --rg-ink-80:     #4A4B4A;
  --rg-ink-60:     #6F706F;
  --rg-ink-40:     #A4A5A4;
  --rg-ink-20:     #D6D7D6;
  --rg-ink-10:     #E9EAE9;
  --rg-ink-05:     #F4F4F3;
  --rg-paper:      #FFFFFF;
  --rg-cream:      #FAF7F4;

  --rg-red-90:     #E03E10;
  --rg-red-10:     #FFEDE6;
  --rg-orange-10:  #FFF1DE;
  --rg-orange-90:  #E67400;

  --rg-fg-1:       var(--rg-ink);
  --rg-fg-2:       var(--rg-ink-80);
  --rg-fg-3:       var(--rg-ink-60);
  --rg-fg-on-dark: var(--rg-paper);
  --rg-fg-on-red:  var(--rg-paper);

  --rg-bg-1:       var(--rg-paper);
  --rg-bg-2:       var(--rg-ink-05);
  --rg-bg-3:       var(--rg-ink-10);
  --rg-bg-dark:    var(--rg-black);

  --rg-accent:        var(--rg-red);
  --rg-accent-hover:  var(--rg-red-90);
  --rg-accent-soft:   var(--rg-orange);

  --rg-border:      var(--rg-ink-10);
  --rg-border-strong: var(--rg-ink-20);
  --rg-focus-ring:  color-mix(in srgb, var(--rg-red) 45%, transparent);

  --rg-success:    #1F8A5B;
  --rg-warning:    var(--rg-orange);
  --rg-danger:     var(--rg-red);
  --rg-info:       #2A6FDB;

  --rg-font-display: "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --rg-font-body:    "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --rg-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rg-text-2xs:   11px;
  --rg-text-xs:    12px;
  --rg-text-sm:    14px;
  --rg-text-base:  16px;
  --rg-text-md:    18px;
  --rg-text-lg:    20px;
  --rg-text-xl:    24px;
  --rg-text-2xl:   30px;
  --rg-text-3xl:   38px;
  --rg-text-4xl:   48px;
  --rg-text-5xl:   64px;
  --rg-text-6xl:   80px;

  --rg-leading-tight: 1.1;
  --rg-leading-snug:  1.25;
  --rg-leading-normal:1.5;
  --rg-leading-loose: 1.7;

  --rg-tracking-tight:  -0.02em;
  --rg-tracking-normal: 0;
  --rg-tracking-wide:   0.04em;
  --rg-tracking-caps:   0.12em;

  --rg-space-0:   0;
  --rg-space-1:   4px;
  --rg-space-2:   8px;
  --rg-space-3:   12px;
  --rg-space-4:   16px;
  --rg-space-5:   20px;
  --rg-space-6:   24px;
  --rg-space-7:   32px;
  --rg-space-8:   40px;
  --rg-space-9:   56px;
  --rg-space-10:  72px;
  --rg-space-11:  96px;
  --rg-space-12: 128px;

  --rg-radius-xs: 2px;
  --rg-radius-sm: 4px;
  --rg-radius-md: 8px;
  --rg-radius-lg: 12px;
  --rg-radius-xl: 20px;
  --rg-radius-pill: 999px;
  --rg-radius-circle: 50%;

  --rg-shadow-1: 0 1px 2px rgba(33,35,34,0.06), 0 1px 1px rgba(33,35,34,0.04);
  --rg-shadow-2: 0 6px 18px rgba(33,35,34,0.08), 0 2px 6px rgba(33,35,34,0.06);
  --rg-shadow-3: 0 18px 40px rgba(33,35,34,0.12), 0 4px 12px rgba(33,35,34,0.08);
  --rg-shadow-glow: 0 10px 30px rgba(250,70,22,0.25);

  --rg-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --rg-ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --rg-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --rg-duration-fast: 140ms;
  --rg-duration-base: 220ms;
  --rg-duration-slow: 420ms;
}

.rg-display,
.rg-h1 {
  font-family: var(--rg-font-display);
  font-weight: 700;
  font-size: var(--rg-text-5xl);
  line-height: var(--rg-leading-tight);
  letter-spacing: var(--rg-tracking-tight);
  color: var(--rg-fg-1);
}

.rg-h2 {
  font-family: var(--rg-font-display);
  font-weight: 500;
  font-size: var(--rg-text-3xl);
  line-height: var(--rg-leading-tight);
  letter-spacing: var(--rg-tracking-tight);
  color: var(--rg-fg-1);
}

.rg-h3 {
  font-family: var(--rg-font-display);
  font-weight: 500;
  font-size: var(--rg-text-2xl);
  line-height: var(--rg-leading-snug);
  color: var(--rg-fg-1);
}

.rg-h4 {
  font-family: var(--rg-font-body);
  font-weight: 700;
  font-size: var(--rg-text-xl);
  line-height: var(--rg-leading-snug);
  color: var(--rg-fg-1);
}

.rg-eyebrow {
  font-family: var(--rg-font-body);
  font-weight: 700;
  font-size: var(--rg-text-xs);
  letter-spacing: var(--rg-tracking-caps);
  text-transform: uppercase;
  color: var(--rg-accent);
}

.rg-body, p {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-text-base);
  line-height: var(--rg-leading-normal);
  color: var(--rg-fg-1);
  text-wrap: pretty;
}

.rg-body-lg {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-text-md);
  line-height: var(--rg-leading-normal);
  color: var(--rg-fg-1);
}

.rg-caption {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-text-sm);
  line-height: var(--rg-leading-snug);
  color: var(--rg-fg-3);
}

.rg-mono, code {
  font-family: var(--rg-font-mono);
  font-size: 0.92em;
}

a.rg-link {
  color: var(--rg-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--rg-accent) 30%, transparent);
  transition: border-color var(--rg-duration-fast) var(--rg-ease-out);
}
a.rg-link:hover { border-bottom-color: var(--rg-accent); }
