:root {
  /* Typography */
  --font-family: soehne, proxima-nova, sans-serif;

  --font-weight--thin: 100;
  --font-weight--extralight: 200;
  --font-weight--light: 300;
  --font-weight--normal: 400;
  --font-weight--medium: 500;
  --font-weight--semibold: 600;
  --font-weight--bold: 700;
  --font-weight--extrabold: 800;
  --font-weight--black: 900;

  --body-font-family: var(--font-family);
  --body-font-size: 1rem;
  --body-font-size--mobile: 1rem;
  --body-font-weight: var(--font-weight--normal);
  --body-font-style: normal;
  --body-line-height: 1.5;
  --body-letter-spacing: 0;
  --body-text-transform: none;
  --body-margin-bottom: var(--spacer--md);

  --h1-font-family: var(--font-family);
  --h1-font-size: 3rem;
  --h1-font-size--mobile: 1.85rem;
  --h1-font-weight: var(--font-weight--normal);
  --h1-font-style: normal;
  --h1-line-height: 1.25;
  --h1-letter-spacing: 0;
  --h1-text-transform: none;
  --h1-margin-bottom: var(--spacer--md);

  --h2-font-family: var(--font-family);
  --h2-font-size: 2.25rem;
  --h2-font-size--mobile: 1.75rem;
  --h2-font-weight: var(--font-weight--semibold);
  --h2-font-style: normal;
  --h2-line-height: 1.25;
  --h2-letter-spacing: 0;
  --h2-text-transform: none;
  --h2-margin-bottom: var(--spacer--md);

  --h3-font-family: var(--font-family);
  --h3-font-size: 1.75rem;
  --h3-font-size--mobile: 1.5rem;
  --h3-font-weight: var(--font-weight--normal);
  --h3-font-style: normal;
  --h3-line-height: 1.25;
  --h3-letter-spacing: 0;
  --h3-text-transform: none;
  --h3-margin-bottom: var(--spacer--md);

  --h4-font-family: var(--font-family);
  --h4-font-size: 1.375rem;
  --h4-font-size--mobile: 1.125rem;
  --h4-font-weight: var(--font-weight--normal);
  --h4-font-style: normal;
  --h4-line-height: 1.25;
  --h4-letter-spacing: 0;
  --h4-text-transform: none;
  --h4-margin-bottom: var(--spacer--md);

  --h5-font-family: var(--font-family);
  --h5-font-size: 1.125rem;
  --h5-font-size--mobile: 1rem;
  --h5-font-weight: var(--font-weight--semibold);
  --h5-font-style: normal;
  --h5-line-height: 1.25;
  --h5-letter-spacing: 0;
  --h5-text-transform: none;
  --h5-margin-bottom: var(--spacer--md);

  --h6-font-family: var(--font-family);
  --h6-font-size: 1rem;
  --h6-font-size--mobile: 0.875rem;
  --h6-font-weight: var(--font-weight--normal);
  --h6-font-style: normal;
  --h6-line-height: 1.25;
  --h6-letter-spacing: 0;
  --h6-text-transform: none;
  --h6-margin-bottom: var(--spacer--md);

  --small-font-family: var(--font-family);
  --small-font-size: 0.75rem;
  --small-font-size--mobile: 0.5rem;
  --small-font-weight: var(--font-weight--normal);
  --small-font-style: normal;
  --small-line-height: 1.25;
  --small-letter-spacing: 0;
  --small-text-transform: none;
  --small-margin-bottom: var(--spacer--md);

  --large-font-family: var(--font-family);
  --large-font-size: 1.5rem;
  --large-font-size--mobile: 1.25rem;
  --large-font-weight: var(--font-weight--normal);
  --large-font-style: normal;
  --large-line-height: 1.25;
  --large-letter-spacing: 0;
  --large-text-transform: none;
  --large-margin-bottom: var(--spacer--md);

  --display-1-font-family: var(--font-family);
  --display-1-font-size: 5rem;
  --display-1-font-size--mobile: 3rem;
  --display-1-font-weight: var(--font-weight--normal);
  --display-1-font-style: normal;
  --display-1-line-height: 1.25;
  --display-1-letter-spacing: 0;
  --display-1-text-transform: none;
  --display-1-margin-bottom: var(--spacer--md);

  --display-2-font-family: var(--font-family);
  --display-2-font-size: 4.5rem;
  --display-2-font-size--mobile: 2.5rem;
  --display-2-font-weight: var(--font-weight--normal);
  --display-2-font-style: normal;
  --display-2-line-height: 1.25;
  --display-2-letter-spacing: 0;
  --display-2-text-transform: none;
  --display-2-margin-bottom: var(--spacer--md);

  --display-3-font-family: var(--font-family);
  --display-3-font-size: 4rem;
  --display-3-font-size--mobile: 2.25rem;
  --display-3-font-weight: var(--font-weight--normal);
  --display-3-font-style: normal;
  --display-3-line-height: 1.25;
  --display-3-letter-spacing: 0;
  --display-3-text-transform: none;
  --display-3-margin-bottom: var(--spacer--md);

  /* Blockquote */
  --blockquote--font-family: var(--font-family);
  --blockquote--font-size: var(--large-font-size);
  --blockquote--font-size--mobile: var(--large-font-size--mobile);
  --blockquote--font-weight: var(--large-font-weight);
  --blockquote--font-style: var(--large-font-style);
  --blockquote--line-height: var(--large-line-height);
  --blockquote--letter-spacing: var(--large-letter-spacing);
  --blockquote--text-transform: none;
  --blockquote--margin: var(--spacer--xl) 0;
  --blockquote--padding: var(--spacer--xl);
  --blockquote--border-width: 0.5rem;
  --blockquote--border-style: solid;

  /* Color primitives */
  --white: #ffffff;
  --black: #111111;
  --primary: #0d6efd;
  --secondary: #6c757d;
  --success: #198754;
  --on-success: #ffffff;
  --warning: #ffc107;
  --on-warning: #111111;
  --error: #dc3545;
  --on-error: #ffffff;

  /* Color Scheme roles — Color Scheme Picker overrides at runtime */
  --background: var(--white);
  --text: var(--black);
  --accent: var(--primary);
  --icon: var(--text);
  --border: var(--primary);
  --link: var(--primary);
  --link-hover: var(--black);

  /* Elevation — child sets values; parent default none */
  --shadow--sm: none;
  --shadow--md: none;
  --shadow--lg: none;

  /* Borders — independent of spacers */
  --border-radius--sm: 0.5rem;
  --border-radius--md: 1rem;
  --border-radius--lg: 2rem;
  --border-radius--circle: 50%;

  /* Buttons */
  --button--font-family: var(--font-family);
  --button--font-size: var(--body-font-size);
  --button--font-size--mobile: var(--body-font-size--mobile);
  --button--font-weight: var(--body-font-weight);
  --button--font-style: var(--body-font-style);
  --button--line-height: 1;
  --button--letter-spacing: var(--body-letter-spacing);
  --button--text-transform: none;

  --button--font-size--sm: var(--small-font-size);
  --button--font-size--sm--mobile: var(--small-font-size--mobile);
  --button--font-size--md: var(--button--font-size);
  --button--font-size--md--mobile: var(--button--font-size--mobile);
  --button--font-size--lg: var(--large-font-size);
  --button--font-size--lg--mobile: var(--large-font-size--mobile);

  --button--gap: var(--spacer--xs);
  --button--padding-y--sm: var(--spacer--2xs);
  --button--padding-x--sm: var(--spacer--xs);
  --button--padding-y--md: var(--spacer--xs);
  --button--padding-x--md: var(--spacer--md);
  --button--padding-y--lg: var(--spacer--md);
  --button--padding-x--lg: var(--spacer--xl);
  --button--padding-y: var(--button--padding-y--md);
  --button--padding-x: var(--button--padding-x--md);
  --button--border-radius--sm: var(--border-radius--sm);
  --button--border-radius--md: var(--border-radius--md);
  --button--border-radius--lg: var(--border-radius--lg);
  --button--border-width--sm: 2px;
  --button--border-width--md: 2px;
  --button--border-width--lg: 2px;
  --button--border-width: var(--button--border-width--md);
  --button--border-style--sm: solid;
  --button--border-style--md: solid;
  --button--border-style--lg: solid;
  --button--border-style: var(--button--border-style--md);
  --button--shadow: var(--shadow--sm);

  --button--toggle-size: 2rem;
  --button--toggle-padding: 0;

  /* Cards */
  --card--padding: var(--spacer--xl);
  --card--padding--mobile: var(--spacer--md);
  --card--header--padding: var(--spacer--sm);
  --card--content--padding-y: var(--spacer--xl);
  --card--content--padding-x: var(--spacer--md);
  --card--border: var(--border);
  --card--border-width: 1px;
  --card--border-style: solid;

  /* Forms */
  /* Labels */
  --label--layout: block;
  --label--visibility: visible;
  --label--font-family: var(--font-family);
  --label--font-size: var(--body-font-size);
  --label--font-size--mobile: var(--body-font-size--mobile);
  --label--font-weight: var(--body-font-weight);
  --label--font-style: var(--body-font-style);
  --label--line-height: var(--body-line-height);
  --label--letter-spacing: var(--body-letter-spacing);
  --label--text-transform: none;
  --label--margin-bottom: var(--spacer--md);
  --label--text: var(--text);
  --label--accent: var(--accent);

  /* Inputs */
  --input--font-family: var(--font-family);
  --input--font-size: var(--body-font-size);
  --input--font-size--mobile: var(--body-font-size--mobile);
  --input--font-weight: var(--body-font-weight);
  --input--font-style: var(--body-font-style);
  --input--line-height: var(--body-line-height);
  --input--letter-spacing: var(--body-letter-spacing);
  --input--text-transform: none;

  --input--min-height: 2.5rem;
  --input--margin: 0;
  --input--padding-y: var(--spacer--xs);
  --input--padding-x: var(--spacer--md);
  --input--padding: var(--input--padding-y) var(--input--padding-x);
  --input--border: 1px solid var(--border);
  --input--border-radius: var(--border-radius--md);
  --input--background: var(--background);
  --input--text: var(--text);
  --input--accent: var(--accent);

  /* Images */
  --image-filter: brightness(1.05) saturate(1.05) contrast(1.05);
  --image-filter--muted: brightness(0.75) saturate(1.05) contrast(1.05);

  /* Header */
  --header--logo-max-height: 3rem;
  --header--logo-max-height--mobile: 2rem;
  --header--menu-item-font-size: var(--h5-font-size);
  --header--menu-sub-item-font-size: var(--h6-font-size);
  
  /* Mobile Menu */
  --mobile-menu--toggle-size: 2rem;
  --mobile-menu--toggle-padding: 0;
  --mobile-menu--toggle-border: none;
  --mobile-menu--toggle-border-radius: 0;
  --mobile-menu--item-font-size: var(--h5-font-size--mobile);
  --mobile-menu--sub-item-font-size: var(--h6-font-size--mobile);

  /* Sections */
  --section--padding--mobile: var(--spacer--4xl);
  --section--padding: 6rem;
  --hero--padding--mobile: 8rem;
  --hero--padding: 12rem;

  /* Transitions */
  --transition--all: all 0.3s ease-in-out;
  --transition--color: color 0.3s ease-in-out;
  --transition--button: background-color 0.3s ease-in-out,
    color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}