/* GNOME brand tokens, from unfairly.ai/brand-guidelines/gnome (checked 2026-10-30).
   Sizes, spacing and components were measured on https://www.gnome.org/ (computed styles and element boxes measured with Playwright at 1440x900 and 390x844 (light color scheme), plus the site stylesheet www.gnome.org/style.css, on 2026-10-30).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name GNOME's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #EEEEEE;
  --color-ink: #000000;
  --color-ink-muted: #77767B;
  --color-accent: #3584E4;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #FF7800;
  --color-night: #1A1622;
  --color-on-night: #FFFFFF;
  --color-blue: #3584E4;
  --color-orange: #FF7800;
  --color-purple: #9141AC;
  --color-green: #33D17A;
  --color-red: #E01B24;
  --color-white: #FFFFFF;
  --color-grey: #77767B;
  --color-quite-black: #241F31;
  --color-hig-blue-1: #99C1F1;
  --color-hig-blue-2: #62A0EA;
  --color-hig-blue-3: #3584E4;
  --color-hig-blue-4: #1C71D8;
  --color-hig-blue-5: #1A5FB4;
  --color-hig-green-1: #8FF0A4;
  --color-hig-green-2: #57E389;
  --color-hig-green-3: #33D17A;
  --color-hig-green-4: #2EC27E;
  --color-hig-green-5: #26A269;
  --color-hig-yellow-1: #F9F06B;
  --color-hig-yellow-2: #F8E45C;
  --color-hig-yellow-3: #F6D32D;
  --color-hig-yellow-4: #F5C211;
  --color-hig-yellow-5: #E5A50A;
  --color-hig-orange-1: #FFBE6F;
  --color-hig-orange-2: #FFA348;
  --color-hig-orange-3: #FF7800;
  --color-hig-orange-4: #E66100;
  --color-hig-orange-5: #C64600;
  --color-hig-red-1: #F66151;
  --color-hig-red-2: #ED333B;
  --color-hig-red-3: #E01B24;
  --color-hig-red-4: #C01C28;
  --color-hig-red-5: #A51D2D;
  --color-hig-purple-1: #DC8ADD;
  --color-hig-purple-2: #C061CB;
  --color-hig-purple-3: #9141AC;
  --color-hig-purple-4: #813D9C;
  --color-hig-purple-5: #613583;
  --color-hig-brown-1: #CDAB8F;
  --color-hig-brown-2: #B5835A;
  --color-hig-brown-3: #986A44;
  --color-hig-brown-4: #865E3C;
  --color-hig-brown-5: #63452C;
  --color-hig-light-1: #FFFFFF;
  --color-hig-light-2: #F6F5F4;
  --color-hig-light-3: #DEDDDA;
  --color-hig-light-4: #C0BFBC;
  --color-hig-light-5: #9A9996;
  --color-hig-dark-1: #77767B;
  --color-hig-dark-2: #5E5C64;
  --color-hig-dark-3: #3D3846;
  --color-hig-dark-4: #241F31;
  --color-hig-dark-5: #000000;
  --color-page-ground: #EEEEEE;
  --color-hero-wash: #CCDEF9;
  --color-hero-banner: #DBE9FA;
  --color-hero-banner-muted-text: #42464B;
  --color-button-fill-on-light: #D6D6D6;
  --color-button-fill-on-dev-tile: #54505C;
  --color-inline-button-on-blue: #1756A2;
  --color-footer-ground: #1A1622;
  --color-suggested-button-site: #4A86CF;
  --color-button-default-fill: #D6D6D6;
  --color-button-default-text: #000000;
  --color-button-suggested-hero-fill: #3584E4;
  --color-button-suggested-hero-text: #FFFFFF;
  --color-button-choice-square-fill: #D6D6D6;
  --color-button-choice-square-text: #000000;
  --color-button-dark-tile-fill: #54505C;
  --color-button-dark-tile-text: #FFFFFF;
  --color-button-on-gradient-fill: #FFFFFF;
  --color-button-on-gradient-text: #FFFFFF;
  --color-button-inline-on-blue-fill: #1756A2;
  --color-button-inline-on-blue-text: #FFFFFF;
  --color-nav-link-text: #000000;
  --color-hero-banner-fill: #DBE9FA;
  --color-hero-banner-text: #000000;
  --color-super-key-chip-text: #000000;
  --color-dev-tile-fill: #3D3846;
  --color-dev-tile-text: #FFFFFF;
  --font-display: Inter, InterVariable, "Inter Variable", Inter, sans-serif;
  --font-body: Inter, InterVariable, "Inter Variable", Inter, sans-serif;
  --font-mono: "Source Code Pro", monospace;
  --font-mono-original: "not published", "Source Code Pro", monospace;
  --page-margin: 162px;
  --section-padding: 36px;
  --container-max: 1116px;
  --hero-text-max: 517px;
  --card-gap: 18px;
  --nav-height: 62px;
  --grid-gutter: 54px;
  --grid-columns: 5;
  --text-display-hero-size: 32.4px;
  --text-display-hero-line: 1.25;
  --text-display-hero-weight: 800;
  --text-display-hero-tracking: -0.32px;
  --text-display-h2-size: 27px;
  --text-display-h2-line: 1.25;
  --text-display-h2-weight: 800;
  --text-display-h2-tracking: -0.27px;
  --text-display-h4-size: 21.6px;
  --text-display-h4-line: 1.25;
  --text-display-h4-weight: 800;
  --text-display-h4-tracking: -0.22px;
  --text-logo-size: 25.2px;
  --text-logo-line: 1.25;
  --text-logo-weight: 900;
  --text-logo-tracking: -0.18px;
  --text-body-size: 18px;
  --text-body-line: 1.6;
  --text-body-weight: 400;
  --text-body-tracking: -0.18px;
  --text-nav-size: 18px;
  --text-nav-line: 1.6;
  --text-nav-weight: 600;
  --text-nav-tracking: -0.18px;
  --text-button-size: 18px;
  --text-button-line: 1.6;
  --text-button-weight: 600;
  --text-button-tracking: -0.18px;
  --text-banner-title-size: 18px;
  --text-banner-title-line: 1.5;
  --text-banner-title-weight: 700;
  --text-banner-title-tracking: -0.18px;
  --text-banner-line-size: 16.2px;
  --text-banner-line-line: 1.5;
  --text-banner-line-weight: 600;
  --text-banner-line-tracking: -0.18px;
  --text-button-small-size: 14.4px;
  --text-button-small-line: 1.6;
  --text-button-small-weight: 600;
  --text-button-small-tracking: -0.18px;
  --text-button-inline-size: 16.2px;
  --text-button-inline-line: 1.6;
  --text-button-inline-weight: 600;
  --text-button-inline-tracking: -0.18px;
  --text-footer-size: 18px;
  --text-footer-line: 1.8;
  --text-footer-weight: 600;
  --text-footer-tracking: -0.18px;
  --text-legal-size: 12.6px;
  --text-legal-line: 1.6;
  --text-legal-weight: 400;
  --text-legal-tracking: -0.18px;
  --radius-button-default: 999px;
  --radius-button-suggested-hero: 999px;
  --radius-button-choice-square: 14.4px;
  --radius-button-dark-tile: 14.4px;
  --radius-button-on-gradient: 999px;
  --radius-button-inline-on-blue: 999px;
  --radius-nav-link: 999px;
  --radius-hero-banner: 12px;
  --radius-super-key-chip: 12px;
  --radius-tile-image: 12px;
  --radius-dev-tile: 24px;
  --ease-button-hover: cubic-bezier(.17,.89,.32,1.28);
  --duration-button-hover: 200ms;
  --ease-tile-hover: cubic-bezier(.17,.89,.32,1.28);
  --duration-tile-hover: 300ms;
  --ease-nav-link: ease-out;
  --duration-nav-link: 300ms;
  --ease-sponsor-hover: ease-out;
  --duration-sponsor-hover: 300ms;
  --icon-symbolic: 16px;
  --icon-app: 128px;
}
/* Phone values measured at 390px; GNOME's CSS switches at 600px. */
@media (max-width: 600px) {
  :root {
    --page-margin: 18px;
    --section-padding: 36px;
    --text-display-hero-size: 23.4px;
    --text-banner-title-size: 16.2px;
    --text-banner-line-size: 14.4px;
    --text-footer-size: 14.4px;
  }
}
.button-default {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 50px; padding: 0 27px; border-radius: 999px;
  background: #D6D6D6; color: #000000;
  font: 600 18px/1 var(--font-body);
}
.button-default:hover { transform: scale(1.05); transition: transform 200ms cubic-bezier(.17,.89,.32,1.28); } /* observed */
.button-suggested-hero {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 50px; padding: 0 27px; border-radius: 999px;
  background: #3584E4; color: #FFFFFF;
  font: 700 18px/1 var(--font-body);
}
.button-suggested-hero:hover { transform: scale(1.06); transition: transform 200ms cubic-bezier(.17,.89,.32,1.28); } /* observed */
.button-choice-square {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 50px; padding: 0 27px; border-radius: 14.4px;
  background: #D6D6D6; color: #000000;
  font: 600 18px/1 var(--font-body);
}
.button-dark-tile {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 45px; padding: 0 27px; border-radius: 14.4px;
  background: #54505C; color: #FFFFFF;
  font: 600 14.4px/1 var(--font-body);
}
.button-on-gradient {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 50px; padding: 0 36px; border-radius: 999px;
  background: #FFFFFF; color: #FFFFFF;
  font: 600 18px/1 var(--font-body);
}
.button-inline-on-blue {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 33px; padding: 0 16.2px; border-radius: 999px;
  background: #1756A2; color: #FFFFFF;
  font: 600 16.2px/1 var(--font-body);
}