/* Adobe brand tokens, from unfairly.ai/brand-guidelines/adobe (checked 2026-10-30).
   Sizes, spacing and components were measured on https://spectrum.adobe.com (Brand law from Spectrum (Adobe's public design system) and Adobe's trademark page; page anatomy measured on adobe.com on 2026-10-30 at 1440 and 390.).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Adobe's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F3F3F3;
  --color-ink: #000000;
  --color-ink-muted: #5C5C5C;
  --color-accent: #EB1000;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #3B63FB;
  --color-night: #000000;
  --color-on-night: #FFFFFF;
  --color-adobe-red: #EB1000;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-gray-75: #F3F3F3;
  --color-gray-50: #F8F8F8;
  --color-gray-100: #E9E9E9;
  --color-gray-200: #E1E1E1;
  --color-gray-800: #292929;
  --color-gray-900: #131313;
  --color-muted-ink-64-black: #5C5C5C;
  --color-card-on-black: #141414;
  --color-muted-on-card-50-white: #8A8A8A;
  --color-muted-on-black-60-white: #999999;
  --color-glass-card-on-photo: #383838;
  --color-pill-on-page: #FAFAFA;
  --color-spectrum-blue-900-accent: #3B63FB;
  --color-spectrum-blue-1000: #274DEA;
  --color-spectrum-red-900-negative: #D73220;
  --color-spectrum-green-900: #05834E;
  --color-spectrum-orange-900: #C24E00;
  --color-illustrator-orange: #FF9A00;
  --color-illustrator-orange-cc-table: #FD9A00;
  --color-illustrator-dark: #330000;
  --color-dimension-celery: #99E83F;
  --color-dimension-dark: #1E3101;
  --color-photoshop-cyan: #31A8FF;
  --color-photoshop-dark: #001E36;
  --color-after-effects-indigo: #9999FF;
  --color-after-effects-dark: #00005B;
  --color-xd-fuchsia: #FF61F6;
  --color-xd-dark: #470137;
  --color-indesign-magenta: #FF3366;
  --color-indesign-magenta-cc-table: #FC487B;
  --color-indesign-dark: #6E132E;
  --color-acrobat-red: #B30B00;
  --color-document-cloud-violet: #584CCC;
  --color-document-cloud-teal: #008CAD;
  --color-dc-coral: #F75C46;
  --color-dc-berry: #AD0955;
  --color-dc-cobalt: #0054B6;
  --color-dc-blush: #FFDBD9;
  --color-dc-lilac: #CCA4FD;
  --color-dc-sky: #78BBFA;
  --color-ec-insights: #9755E6;
  --color-ec-content-management: #8CDC47;
  --color-ec-data-management: #16878C;
  --color-ec-marketing: #D83791;
  --color-ec-advertising: #B130BD;
  --color-ec-commerce: #DA7B11;
  --color-assistant-pink: #EC69FF;
  --color-assistant-orange-red: #FF513D;
  --color-express-lavender: #DEDEF9;
  --color-express-indigo: #5C5CE0;
  --color-express-gray: #242424;
  --color-button-primary-on-dark-fill: #FFFFFF;
  --color-button-primary-on-dark-text: #000000;
  --color-button-primary-on-dark-ring: #FFFFFF;
  --color-button-secondary-on-dark-text: #FFFFFF;
  --color-button-secondary-on-dark-ring: #FFFFFF;
  --color-button-signin-fill: #FFFFFF;
  --color-button-signin-text: #000000;
  --color-text-link-chevron-text: #000000 on white, #FFFFFF on dark;
  --color-carousel-card-fill: #F3F3F3;
  --font-display: "Rethink Sans", "Rethink Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display-original: "Adobe Clean Display Black", "Rethink Sans", "Rethink Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "Adobe Clean", "Source Sans 3", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Source Code Pro", "Source Code Pro", Menlo, monospace;
  --font-mono-original: "not published on the public page", "Source Code Pro", "Source Code Pro", Menlo, monospace;
  --page-margin: 120px;
  --section-padding: 128px;
  --container-max: 1200px;
  --hero-text-max: 484px;
  --card-gap: 8px;
  --nav-height: 80px;
  --grid-gutter: 8px;
  --grid-columns: 3;
  --text-display-xl-size: 80px;
  --text-display-xl-line: 0.95;
  --text-display-xl-weight: 800;
  --text-display-xl-tracking: -1.6px;
  --text-display-l-size: 56px;
  --text-display-l-line: 1;
  --text-display-l-weight: 800;
  --text-display-l-tracking: -1.12px;
  --text-title-size: 24px;
  --text-title-line: 1;
  --text-title-weight: 800;
  --text-title-tracking: -0.96px;
  --text-lead-size: 20px;
  --text-lead-line: 1.2;
  --text-lead-weight: 400;
  --text-body-size: 16px;
  --text-body-line: 1.25;
  --text-body-weight: 400;
  --text-body-strong-size: 16px;
  --text-body-strong-line: 1.25;
  --text-body-strong-weight: 700;
  --text-body-strong-tracking: -0.2px;
  --text-label-size: 14px;
  --text-label-line: 1.2857;
  --text-label-weight: 700;
  --text-legal-size: 12px;
  --text-legal-line: 1.3333;
  --text-legal-weight: 700;
  --radius-button-primary-on-dark: 999px;
  --radius-button-secondary-on-dark: 999px;
  --radius-button-signin: 999px;
  --radius-hero-category-card: 8px;
  --radius-carousel-card: 16px;
  --radius-product-card-dark: 16px;
  --radius-assistant-pill: 26px;
  --ease-homepage-ease: cubic-bezier(0.42, 0, 0, 1);
  --duration-homepage-ease: 300ms;
  --ease-homepage-fade: ease;
  --duration-homepage-fade: 500ms;
}
/* Phone values measured at 390px. Adobe's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 24px;
    --section-padding: 40px;
    --text-display-xl-size: 40px;
    --text-display-l-size: 32px;
    --text-title-size: 18px;
    --text-lead-size: 16px;
  }
}
.button-primary-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 24px; border-radius: 999px;
  background: #FFFFFF; color: #000000;
  box-shadow: inset 0 0 0 2px #FFFFFF;
  font: 700 14px/1 var(--font-body);
}
.button-primary-on-dark:hover { background-color: #F3F3F3; border-color: #F3F3F3; } /* our reading */
.button-secondary-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 24px; border-radius: 999px;
  background: transparent; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FFFFFF;
  font: 700 14px/1 var(--font-body);
}
.button-secondary-on-dark:hover { background-color: #FFFFFF; color: #000000; } /* our reading */
.button-signin {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 16px; border-radius: 999px;
  background: #FFFFFF; color: #000000;
  font: 700 14px/1 var(--font-body);
}