/* Pinterest brand tokens, from unfairly.ai/brand-guidelines/pinterest (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.pinterest.com/ (computed styles and geometry in headless Chrome at 1440x900 and 390x844, desktop user agent, after scrolling the full page; fonts calibrated by rendering).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Pinterest's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F6F6F3;
  --color-ink: #000000;
  --color-ink-muted: #62625B;
  --color-accent: #E60023;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #E5E5E0;
  --color-night: #000000;
  --color-on-night: #FFFFFF;
  --color-pushpin-450: #E60023;
  --color-cosmicore-900: #111111;
  --color-skycicle-500: #0074E8;
  --color-roboflow-500: #767676;
  --color-roboflow-200: #E9E9E9;
  --color-mochimalist-0: #FFFFFF;
  --color-skycicle-300: #75BFFF;
  --color-roboflow-300: #CDCDCD;
  --color-flaminglow-450: #EE376A;
  --color-skycicle-450: #007CFF;
  --color-spabattical-450: #009990;
  --color-matchacado-450: #1DAD65;
  --color-mysticool-450: #8A39FA;
  --color-firetini-450: #FF5B45;
  --color-caramellow-450: #D86800;
  --color-pushpin-500: #CC0000;
  --color-roboflow-100: #F1F1F1;
  --color-pushpin-hover: #CC001F;
  --color-heading-ink: #211922;
  --color-black: #000000;
  --color-muted: #62625B;
  --color-secondary-button: #E5E5E0;
  --color-secondary-hover: #DADAD3;
  --color-wash: #F6F6F3;
  --color-input-border: #91918C;
  --color-verified-red: #DD0E0E;
  --color-image-placeholder: #EFEFEF;
  --color-overlay-base: #242421;
  --color-button-primary-fill: #E60023;
  --color-button-primary-text: #FFFFFF;
  --color-button-secondary-fill: #E5E5E0;
  --color-button-secondary-text: #000000;
  --color-button-google-fill: #FFFFFF;
  --color-button-google-text: #000000;
  --color-button-google-ring: #91918C;
  --color-nav-link-text: #000000;
  --color-search-field-fill: #E5E5E0;
  --color-input-fill: #FFFFFF;
  --color-carousel-arrow-fill: #FFFFFF;
  --color-banner-board-card-fill: #FFFFFF;
  --color-signup-card-fill: #FFFFFF;
  --font-display: Figtree, Figtree, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display-original: "Pin Sans", Figtree, Figtree, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: Figtree, Figtree, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body-original: "Pin Sans", Figtree, Figtree, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --page-margin: 150px;
  --section-padding: 100px;
  --container-max: 1140px;
  --hero-text-max: 480px;
  --card-gap: 16px;
  --nav-height: 80px;
  --grid-gutter: 16px;
  --grid-columns: 2;
  --text-display-xl-size: 70px;
  --text-display-xl-line: 1.2;
  --text-display-xl-weight: 600;
  --text-display-l-size: 48px;
  --text-display-l-line: 1.1;
  --text-display-l-weight: 800;
  --text-display-l-tracking: -2px;
  --text-heading-xl-size: 50px;
  --text-heading-xl-line: 1.2;
  --text-heading-xl-weight: 700;
  --text-heading-l-size: 38px;
  --text-heading-l-line: 1.18;
  --text-heading-l-weight: 700;
  --text-heading-m-size: 36px;
  --text-heading-m-line: 1.1;
  --text-heading-m-weight: 800;
  --text-heading-m-tracking: -1.5px;
  --text-title-l-size: 32px;
  --text-title-l-line: 1.06;
  --text-title-l-weight: 700;
  --text-title-m-size: 28px;
  --text-title-m-line: 1.1;
  --text-title-m-weight: 700;
  --text-title-m-tracking: -0.5px;
  --text-body-l-size: 20px;
  --text-body-l-line: 1.4;
  --text-body-l-weight: 400;
  --text-body-l-tracking: 0.2px;
  --text-body-strong-size: 16px;
  --text-body-strong-line: 1.4;
  --text-body-strong-weight: 700;
  --text-label-size: 16px;
  --text-label-line: 1.2;
  --text-label-weight: 500;
  --text-label-tracking: 0.15px;
  --text-body-size: 16px;
  --text-body-line: 1.4;
  --text-body-weight: 400;
  --text-caption-size: 12px;
  --text-caption-line: 1.5;
  --text-caption-weight: 400;
  --radius-button-primary: 16px;
  --radius-button-secondary: 16px;
  --radius-button-google: 16px;
  --radius-nav-link: 16px;
  --radius-search-field: 12px;
  --radius-input: 12px;
  --radius-board-card: 16px;
  --radius-carousel-arrow: 999px;
  --radius-banner-board-card: 40px;
  --radius-signup-card: 20px;
  --radius-media-panel: 32px;
  --ease-press: ease-out;
  --duration-press: 85ms;
  --icon-nav: 16px;
  --icon-badge: 12px;
  --icon-large: 24px;
  --icon-brand: 36px;
}
/* Phone values measured at 390px. Pinterest's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 8px;
    --section-padding: 100px;
    --text-title-l-size: 11px;
  }
}
.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 16px; border-radius: 16px;
  background: #E60023; color: #FFFFFF;
  font: 500 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #CC001F; } /* observed */
.button-primary:active { transform: scale(0.97); transition: transform 0.085s ease-out; } /* observed */
.button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 16px; border-radius: 16px;
  background: #E5E5E0; color: #000000;
  font: 500 16px/1 var(--font-body);
}
.button-secondary:hover { background-color: #DADAD3; } /* observed */
.button-google {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 16px; border-radius: 16px;
  background: #FFFFFF; color: #000000;
  box-shadow: inset 0 0 0 1px #91918C;
  font: 500 16px/1 var(--font-body);
}