/* Fedora brand tokens, from unfairly.ai/brand-guidelines/fedora (checked 2026-10-31).
   Sizes, spacing and components were measured on guide.pdf (Read from the 26-page booklet's page renders (text is outlined, so no text layer), with palette pages re-rendered at 200 dpi to read every hex, plus the HTML edition, trademark guidelines and Mission page (fetched 2026-10-30)).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Fedora's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #E8EFF8;
  --color-ink: #294172;
  --color-ink-muted: #6F81A6;
  --color-accent: #51A2DA;
  --color-accent-dark: #3C6EB4;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #DB3279;
  --color-night: #294172;
  --color-on-night: #FFFFFF;
  --color-accent-on-night: #51A2DA;
  --color-dark-fedora-blue: #294172;
  --color-fedora-blue: #3C6EB4;
  --color-new-fedora-blue: #51A2DA;
  --color-freedom-purple: #A07CBC;
  --color-friends-magenta: #DB3279;
  --color-features-orange: #E59728;
  --color-first-green: #79DB32;
  --color-black: #000000;
  --color-neutral-2: #1D252E;
  --color-neutral-3: #4C4C4C;
  --color-neutral-4: #8C8C8C;
  --color-neutral-5: #DEDEDE;
  --color-white: #FFFFFF;
  --color-dark-fedora-blue-1: #152139;
  --color-dark-fedora-blue-2: #1F3156;
  --color-dark-fedora-blue-4: #6F81A6;
  --color-dark-fedora-blue-5: #D8E1EE;
  --color-fedora-blue-1: #1E3762;
  --color-fedora-blue-2: #2D5387;
  --color-fedora-blue-4: #8FAED9;
  --color-fedora-blue-5: #E8EFF8;
  --color-new-fedora-blue-1: #295178;
  --color-new-fedora-blue-2: #3D7AA8;
  --color-new-fedora-blue-4: #AAD0EE;
  --color-new-fedora-blue-5: #DCEBF8;
  --color-freedom-purple-1: #503E68;
  --color-freedom-purple-2: #6E5685;
  --color-freedom-purple-4: #CFBDDD;
  --color-freedom-purple-5: #ECE5F1;
  --color-friends-magenta-1: #72193B;
  --color-friends-magenta-2: #B32963;
  --color-friends-magenta-4: #ED97BB;
  --color-friends-magenta-5: #F9DDE9;
  --color-features-orange-1: #784C14;
  --color-features-orange-2: #AC721E;
  --color-features-orange-4: #F2CA92;
  --color-features-orange-5: #FBEEDB;
  --color-first-green-1: #3D6F1D;
  --color-first-green-2: #589F25;
  --color-first-green-4: #BBED97;
  --color-first-green-5: #E9F9DD;
  --color-color-blind-safe-light-green: #AFEA85;
  --color-color-blind-safe-amber: #F5A326;
  --color-color-blind-safe-lavender: #B193C8;
  --color-color-blind-safe-green: #38BC3B;
  --color-color-blind-safe-orange: #EB7434;
  --color-color-blind-safe-deep-purple: #603E79;
  --color-color-blind-safe-yellow: #FFD117;
  --color-editions-gray-gray-100: #F3F4F6;
  --color-footer-gray-gray-200: #E5E7EB;
  --color-card-copy-gray-gray-700: #374151;
  --color-panel-copy-gray-900: #111827;
  --color-legal-link-gray-fp-gray-darkest: #535961;
  --color-legal-link-hover-fp-gray: #9A9FA6;
  --color-release-circle-blue-blue-400: #60A5FA;
  --color-menu-sheet-gray-neutral-100: #F5F5F5;
  --color-downloads-panel-rendered-left: #DEF6CC;
  --color-downloads-panel-rendered-right: #CEDBEC;
  --color-button-primary-fill: #51A2DA;
  --color-button-primary-text: #FFFFFF;
  --color-text-link-download-text: #3C6EB4;
  --color-text-link-learn-more-text: #294172;
  --color-release-circle-fill: #60A5FA;
  --color-release-circle-text: #FFFFFF;
  --color-announcement-pill-fill: #3C6EB4;
  --color-edition-card-fill: #FFFFFF;
  --color-support-card-fill: #F3F4F6;
  --font-display: Montserrat, Montserrat, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --page-margin: 80px;
  --section-padding: 48px;
  --container-max: 1280px;
  --hero-text-max: 853px;
  --nav-height: 54px;
  --grid-gutter: 64px;
  --grid-columns: 2;
  --text-display-xl-size: 60px;
  --text-display-xl-line: 1;
  --text-display-xl-weight: 600;
  --text-lead-size: 30px;
  --text-lead-line: 1.2;
  --text-lead-weight: 400;
  --text-display-m-size: 36px;
  --text-display-m-line: 1.111;
  --text-display-m-weight: 600;
  --text-title-gradient-size: 30px;
  --text-title-gradient-line: 1.2;
  --text-title-gradient-weight: 700;
  --text-title-l-size: 30px;
  --text-title-l-line: 1.2;
  --text-title-l-weight: 600;
  --text-label-display-size: 24px;
  --text-label-display-line: 1.333;
  --text-label-display-weight: 600;
  --text-statement-size: 20px;
  --text-statement-line: 1.4;
  --text-statement-weight: 400;
  --text-label-ui-size: 24px;
  --text-label-ui-line: 1.333;
  --text-label-ui-weight: 600;
  --text-body-size: 18px;
  --text-body-line: 1.556;
  --text-body-weight: 400;
  --text-eyebrow-size: 18px;
  --text-eyebrow-line: 1.556;
  --text-eyebrow-weight: 400;
  --text-numeral-size: 60px;
  --text-numeral-line: 1;
  --text-numeral-weight: 700;
  --text-caption-size: 14px;
  --text-caption-line: 1.429;
  --text-caption-weight: 400;
  --text-nav-size: 14px;
  --text-nav-line: 1.429;
  --text-nav-weight: 400;
  --text-button-size: 18px;
  --text-button-line: 1.556;
  --text-button-weight: 500;
  --text-link-size: 16px;
  --text-link-line: 1.5;
  --text-link-weight: 400;
  --radius-button-primary: 4px;
  --radius-release-circle: 9999px;
  --radius-announcement-pill: 6px;
  --radius-edition-card: 12px;
  --radius-support-card: 6px;
  --radius-gradient-panel: 8px;
  --ease-link-fade: ease-out;
  --duration-link-fade: 500ms;
  --ease-button-hover: ease-in-out;
  --duration-button-hover: 300ms;
  --ease-footer-link: ease-in-out;
  --duration-footer-link: 150ms;
}
/* Phone values measured at 390px; Fedora's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 16px;
    --section-padding: 48px;
    --text-display-xl-size: 36px;
    --text-lead-size: 16px;
    --text-display-m-size: 30px;
    --text-title-gradient-size: 20px;
    --text-title-l-size: 24px;
    --text-label-display-size: 16px;
    --text-body-size: 16px;
    --text-eyebrow-size: 16px;
    --text-numeral-size: 48px;
    --text-caption-size: 12px;
    --text-button-size: 16px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 24px; border-radius: 4px;
  background: #51A2DA; color: #FFFFFF;
  font: 500 18px/1 var(--font-body);
}
.button-primary:hover { background-color: #3D7AA8; transition: all 300ms ease-in-out; } /* observed */