:root {
  /*
   * Prototype controls
   * This is the file to tweak live with Paul.
   * Tokens only: the page/chrome stylesheets should consume these values.
   */

  /* Color */
  --color-ink: #101316;
  --color-muted: rgba(0, 0, 0, 0.7);
  --color-paper: #f5f3ef;
  --color-soft: #e6e2da;
  --color-line: rgba(16, 19, 22, 0.09);
  --color-line-strong: rgba(16, 19, 22, 0.14);
  --color-line-faint: rgba(16, 19, 22, 0.05);
  --color-accent: rgb(16, 19, 22);

  /* Spacing */
  --space-gap: clamp(14px, 1.4vw, 24px);
  --space-pad: clamp(14px, 2.2vw, 42px);
  --space-global-gutter: 40px;
  --space-page-gutter: var(--space-global-gutter);
  --space-meta-separator: 8px;
  --space-case-study-gutter: var(--space-global-gutter);
  --space-case-study-column-gap: var(--space-global-gutter);
  --space-footer-gutter: var(--space-global-gutter);
  --space-section-header-y: 16px;
  --space-section-header-gap: 12px;
  --space-section-header-open-top: 60px;
  --space-section-header-open-bottom: 12px;
  --space-section-pad-y: 40px;
  --space-stack-gap: 18px;
  --space-item-gap: 12px;
  --space-grid-gap: clamp(18px, 2vw, 32px);
  --space-card-pad-y: 22px;
  --space-card-pad-y-loose: 26px;
  --space-card-pad-bottom: 30px;
  --measure-section-header-copy: 34rem;

  /* Shared thin section headers */
  --type-size-section-label: var(--type-size-meta);
  --type-weight-section-label: var(--type-weight-meta);
  --type-stretch-section-label: var(--type-stretch-meta);
  --type-line-section-label: var(--type-line-meta);
  --type-size-section-heading: 30px;
  --type-weight-section-heading: 600;
  --type-line-section-heading: 1.2;
  --type-size-copy-support: var(--type-size-body-small);
  --type-size-copy-project: 14px;
  --type-size-copy-lead: 17px;
  --type-size-link-utility: 12px;
}

/*
 * Type suites
 * Switch the body class in header.php, e.g. `type-suite-archivo`
 * or future candidates like `type-suite-inter`.
 */

:root.type-suite-archivo {
  /* Font family */
  --font-family-body: "Archivo", Arial, sans-serif;
  --font-family-display: var(--font-family-body);
  --font-family-ui: var(--font-family-body);

  /* Body */
  --type-size-body: 13px;
  --type-size-body-small: 13px;
  --type-weight-body: 300;
  --type-stretch-body: 88%;
  --type-line-body: 1.35;

  /* Meta / utility text */
  --type-size-meta: 11px;
  --type-weight-meta: 400;
  --type-stretch-meta: 100%;
  --type-line-meta: 1.25;

  /* Titles and headings */
  --type-size-title-default: clamp(15px, 1.1vw, 19px);
  --type-size-title-card: clamp(17px, 1.5vw, 24px);
  --type-size-title-showcase: clamp(20px, 2.2vw, 34px);
  --type-weight-title: 400;
  --type-stretch-title: 75%;
  --type-line-title: 0.95;

  --type-size-heading-default: clamp(22px, 2.8vw, 42px);
  --type-size-heading-service: clamp(20px, 2.4vw, 38px);
  --type-weight-heading: 400;
  --type-stretch-heading: 75%;
  --type-line-heading: 0.94;

  /* Display */
  --type-size-display-default: clamp(24px, 3.5vw, 52px);
  --type-size-display-roomy: clamp(26px, 4vw, 58px);
  --type-size-display-wide: clamp(26px, 3.8vw, 62px);
  --type-size-display-contact: clamp(30px, 5vw, 72px);
  --type-weight-display: 400;
  --type-stretch-display: 75%;
  --type-line-display: 0.9;
  --type-line-display-tight: 0.86;

  /* Wordmark */
  --type-size-wordmark: clamp(18px, 2.1vw, 34px);
  --type-weight-wordmark: 600;
  --type-stretch-wordmark: 75%;
  --type-line-wordmark: 0.9;

  /* Special cases */
  --type-size-stat: clamp(28px, 4vw, 58px);
  --type-size-quote: clamp(18px, 2.3vw, 34px);
}

:root.type-suite-montserrat {
  --font-family-body: "Montserrat", Arial, sans-serif;
  --font-family-display: var(--font-family-body);
  --font-family-ui: var(--font-family-body);

  --type-size-body: 13px;
  --type-size-body-small: 13px;
  --type-weight-body: 400;
  --type-stretch-body: 100%;
  --type-line-body: 1.38;

  --type-size-meta: 11px;
  --type-weight-meta: 500;
  --type-stretch-meta: 100%;
  --type-line-meta: 1.25;

  --type-size-title-default: clamp(15px, 1.1vw, 19px);
  --type-size-title-card: clamp(17px, 1.5vw, 24px);
  --type-size-title-showcase: clamp(20px, 2.2vw, 34px);
  --type-weight-title: 500;
  --type-stretch-title: 100%;
  --type-line-title: 1;

  --type-size-heading-default: clamp(22px, 2.8vw, 42px);
  --type-size-heading-service: clamp(20px, 2.4vw, 38px);
  --type-weight-heading: 600;
  --type-stretch-heading: 100%;
  --type-line-heading: 0.98;

  --type-size-display-default: clamp(24px, 3.5vw, 52px);
  --type-size-display-roomy: clamp(26px, 4vw, 58px);
  --type-size-display-wide: clamp(26px, 3.8vw, 62px);
  --type-size-display-contact: clamp(30px, 5vw, 72px);
  --type-weight-display: 600;
  --type-stretch-display: 100%;
  --type-line-display: 0.94;
  --type-line-display-tight: 0.9;

  --type-size-wordmark: clamp(18px, 2.1vw, 34px);
  --type-weight-wordmark: 700;
  --type-stretch-wordmark: 100%;
  --type-line-wordmark: 0.95;

  --type-size-stat: clamp(28px, 4vw, 58px);
  --type-size-quote: clamp(18px, 2.3vw, 34px);
}

:root.type-suite-work-sans {
  --font-family-body: "Work Sans", Arial, sans-serif;
  --font-family-display: var(--font-family-body);
  --font-family-ui: var(--font-family-body);

  --type-size-body: 13px;
  --type-size-body-small: 13px;
  --type-weight-body: 400;
  --type-stretch-body: 100%;
  --type-line-body: 1.38;

  --type-size-meta: 11px;
  --type-weight-meta: 500;
  --type-stretch-meta: 100%;
  --type-line-meta: 1.25;

  --type-size-title-default: clamp(15px, 1.1vw, 19px);
  --type-size-title-card: clamp(17px, 1.5vw, 24px);
  --type-size-title-showcase: clamp(20px, 2.2vw, 34px);
  --type-weight-title: 500;
  --type-stretch-title: 100%;
  --type-line-title: 0.98;

  --type-size-heading-default: clamp(22px, 2.8vw, 42px);
  --type-size-heading-service: clamp(20px, 2.4vw, 38px);
  --type-weight-heading: 600;
  --type-stretch-heading: 100%;
  --type-line-heading: 0.96;

  --type-size-display-default: clamp(24px, 3.5vw, 52px);
  --type-size-display-roomy: clamp(26px, 4vw, 58px);
  --type-size-display-wide: clamp(26px, 3.8vw, 62px);
  --type-size-display-contact: clamp(30px, 5vw, 72px);
  --type-weight-display: 600;
  --type-stretch-display: 100%;
  --type-line-display: 0.92;
  --type-line-display-tight: 0.88;

  --type-size-wordmark: clamp(18px, 2.1vw, 34px);
  --type-weight-wordmark: 700;
  --type-stretch-wordmark: 100%;
  --type-line-wordmark: 0.94;

  --type-size-stat: clamp(28px, 4vw, 58px);
  --type-size-quote: clamp(18px, 2.3vw, 34px);
}

:root.type-suite-chivo {
  --font-family-body: "Chivo", Arial, sans-serif;
  --font-family-display: var(--font-family-body);
  --font-family-ui: var(--font-family-body);

  --type-size-body: 13px;
  --type-size-body-small: 13px;
  --type-weight-body: 400;
  --type-stretch-body: 100%;
  --type-line-body: 1.36;

  --type-size-meta: 11px;
  --type-weight-meta: 500;
  --type-stretch-meta: 100%;
  --type-line-meta: 1.25;

  --type-size-title-default: clamp(15px, 1.1vw, 19px);
  --type-size-title-card: clamp(17px, 1.5vw, 24px);
  --type-size-title-showcase: clamp(20px, 2.2vw, 34px);
  --type-weight-title: 500;
  --type-stretch-title: 100%;
  --type-line-title: 0.97;

  --type-size-heading-default: clamp(22px, 2.8vw, 42px);
  --type-size-heading-service: clamp(20px, 2.4vw, 38px);
  --type-weight-heading: 600;
  --type-stretch-heading: 100%;
  --type-line-heading: 0.94;

  --type-size-display-default: clamp(24px, 3.5vw, 52px);
  --type-size-display-roomy: clamp(26px, 4vw, 58px);
  --type-size-display-wide: clamp(26px, 3.8vw, 62px);
  --type-size-display-contact: clamp(30px, 5vw, 72px);
  --type-weight-display: 600;
  --type-stretch-display: 100%;
  --type-line-display: 0.9;
  --type-line-display-tight: 0.87;

  --type-size-wordmark: clamp(18px, 2.1vw, 34px);
  --type-weight-wordmark: 700;
  --type-stretch-wordmark: 100%;
  --type-line-wordmark: 0.92;

  --type-size-stat: clamp(28px, 4vw, 58px);
  --type-size-quote: clamp(18px, 2.3vw, 34px);
}

:root.type-suite-source-sans-3 {
  --font-family-body: "Source Sans 3", Arial, sans-serif;
  --font-family-display: var(--font-family-body);
  --font-family-ui: var(--font-family-body);

  --type-size-body: 14px;
  --type-size-body-small: 13px;
  --type-weight-body: 400;
  --type-stretch-body: 100%;
  --type-line-body: 1.4;

  --type-size-meta: 11px;
  --type-weight-meta: 500;
  --type-stretch-meta: 100%;
  --type-line-meta: 1.25;

  --type-size-title-default: clamp(15px, 1.1vw, 19px);
  --type-size-title-card: clamp(17px, 1.5vw, 24px);
  --type-size-title-showcase: clamp(20px, 2.2vw, 34px);
  --type-weight-title: 500;
  --type-stretch-title: 100%;
  --type-line-title: 1;

  --type-size-heading-default: clamp(22px, 2.8vw, 42px);
  --type-size-heading-service: clamp(20px, 2.4vw, 38px);
  --type-weight-heading: 600;
  --type-stretch-heading: 100%;
  --type-line-heading: 0.98;

  --type-size-display-default: clamp(24px, 3.5vw, 52px);
  --type-size-display-roomy: clamp(26px, 4vw, 58px);
  --type-size-display-wide: clamp(26px, 3.8vw, 62px);
  --type-size-display-contact: clamp(30px, 5vw, 72px);
  --type-weight-display: 700;
  --type-stretch-display: 100%;
  --type-line-display: 0.94;
  --type-line-display-tight: 0.9;

  --type-size-wordmark: clamp(18px, 2.1vw, 34px);
  --type-weight-wordmark: 700;
  --type-stretch-wordmark: 100%;
  --type-line-wordmark: 0.94;

  --type-size-stat: clamp(28px, 4vw, 58px);
  --type-size-quote: clamp(18px, 2.3vw, 34px);
}