:root, :host {
  color-scheme: light dark;

  /* Typography */

  /** Font families **/
  --font-family-display: 'django-logikal-cooper-hewitt', sans-serif;
  --font-family-text: 'django-logikal-lato', sans-serif;
  --font-family-text-monospace: 'django-logikal-roboto-mono', monospace;

  /** Font sizing **/

  /*** Heading sizes ***/
  --font-size-title: 2.75rem; /* 44px */
  --font-leading-title: 3rem; /* 48px */

  --font-size-subtitle: 1.75rem; /* 28px */
  --font-leading-subtitle: 2.25rem; /* 36px */

  --font-size-heading: 1.75rem; /* 28px */
  --font-leading-heading: 2.25rem; /* 36px */

  --font-size-subheading: 1.25rem; /* 20px */
  --font-leading-subheading: 1.75rem; /* 28px */

  /*** Body sizes ***/
  --font-size-body: 1.25rem; /* 20px */
  --font-leading-body: 1.75rem; /* 28px */

  --font-size-body-caption: 1.125rem; /* 18px */
  --font-leading-body-caption: 1.75rem; /* 28px */

  --font-size-body-code: 1.125rem; /* 18px */
  --font-leading-body-code: 1.75rem; /* 28px */

  /** Font metric corrections **/
  --font-button-icon-text-vertical-shift: 0.0625rem;

  /** Font theme **/

  /*** Heading fonts ***/
  --theme-font-title: var(--font-size-title)/var(--font-leading-title)
    var(--font-family-display);
  --theme-font-subtitle: italic var(--font-size-subtitle)/var(--font-leading-subtitle)
    var(--font-family-display);
  --theme-font-heading: 600 var(--font-size-heading)/var(--font-leading-heading)
    var(--font-family-display);
  --theme-font-subheading: bold var(--font-size-subheading)/var(--font-leading-subheading)
    var(--font-family-display);

  /*** Body fonts ***/
  --theme-font-body: var(--font-size-body)/var(--font-leading-body)
    var(--font-family-text);
  --theme-font-body-emphasis: bold var(--font-size-body)/var(--font-leading-body)
    var(--font-family-text);
  --theme-font-body-caption: var(--font-size-body-caption)/var(--font-leading-body-caption)
    var(--font-family-text);
  --theme-font-body-code: var(--font-size-body-code)/var(--font-leading-body-code)
    var(--font-family-text-monospace);

  /* Layout */

  /** Spacing **/
  --length-gap-subelement: 0.3125rem; /* 5px */
  --length-gap-element: 0.625rem; /* 10px */
  --length-gap-group: 1.25rem; /* 20px */
  --length-gap-subsection: 1.875rem; /* 30px */
  --length-gap-section: 2.5rem; /* 40px */
  --length-gap-region: 3.75rem; /* 60px */

  /** Splits **/
  --split-equal: 1fr 1fr;
  --split-golden-ratio: 1.618fr 1fr;
  --split-golden-ratio-reverse: 1fr 1.618fr;

  /** Text margins **/

  /*** Heading heights ***/
  --length-title-height: calc(7 * var(--font-leading-body));
  --length-subtitle-height: calc(2 * var(--font-leading-body));
  --length-heading-height: calc(5 * var(--font-leading-body));
  --length-subheading-height: calc(3 * var(--font-leading-body));

  /*** Margin components ***/
  --golden-ratio-major: 0.618;
  --golden-ratio-minor: 0.382;
  --equal-ratio: 0.5;

  --length-margin-start-title: calc(
    (var(--length-title-height) - var(--font-leading-title)) * var(--golden-ratio-major)
  );
  --length-margin-end-title: calc(
    (var(--length-title-height) - var(--font-leading-title)) * var(--golden-ratio-minor)
  );
  --length-margin-start-subtitle: calc(
    (var(--length-subtitle-height) - var(--font-leading-subtitle)) * var(--golden-ratio-major)
  );
  --length-margin-end-subtitle: calc(
    (var(--length-subtitle-height) - var(--font-leading-subtitle)) * var(--golden-ratio-minor)
  );
  --length-margin-start-heading: calc(
    (var(--length-heading-height) - var(--font-leading-heading)) * var(--golden-ratio-major)
  );
  --length-margin-end-heading: calc(
    (var(--length-heading-height) - var(--font-leading-heading)) * var(--golden-ratio-minor)
  );
  --length-margin-start-subheading: calc(
    (var(--length-subheading-height) - var(--font-leading-subheading)) * var(--equal-ratio)
  );
  --length-margin-end-subheading: calc(
    (var(--length-subheading-height) - var(--font-leading-subheading)) * var(--equal-ratio)
  );

  --length-margin-start-paragraph: var(--font-leading-body);
  --length-margin-end-paragraph: var(--font-leading-body);
  --length-margin-start-subparagraph: calc(var(--font-leading-body) * 0.5);
  --length-margin-end-subparagraph: calc(var(--font-leading-body) * 0.5);

  /*** Margins ***/

  /**** Heading ****/
  --margin-title: var(--length-margin-start-title) 0 var(--length-margin-end-title);
  --margin-subtitle: var(--length-margin-start-subtitle) 0 var(--length-margin-end-subtitle);
  --margin-heading: var(--length-margin-start-heading) 0 var(--length-margin-end-heading);
  --margin-subheading: var(--length-margin-start-subheading) 0 var(--length-margin-end-subheading);

  /**** Paragraph ****/
  --margin-paragraph: var(--length-margin-start-paragraph) 0 var(--length-margin-end-paragraph);
  --margin-subparagraph: var(--length-margin-start-subparagraph) 0
    var(--length-margin-end-subparagraph);

  /** Elements **/

  /*** Radii ***/
  --length-radius-element: 0.5rem; /* 8px */
  --length-radius-group: 1rem; /* 16px */

  /*** Edges ***/
  --length-edge-element: 0.0625rem; /* 1px */
  --length-edge-group: 0.125rem; /* 2px */

  /*** Areas ***/
  --length-element-width: 18.75rem; /* 300px */
  --length-form-width: 24rem; /* 384px */
  --length-card-width: 27rem; /* 432px */

  --length-button-icon: 1.5rem; /* 24px */
  --length-nav-logo-height: 1.25rem; /* 20px */

  /*** Text ***/

  /* _Note: ideal text width is ~66 characters per line, however, due to typical computer screen
   *        aspect ratios and the crude typesetting algorithms in browsers we have to push text
   *        width wider and closer to the readability limit (~80). */
  --length-text-width: 50rem; /* 700px */
  --length-text-width-code: 75rem; /* 1200px */
  --length-text-indent: 2em; /* 40px with 20px font size */
}