:root {
  /*#
  If font is specified as a shorthand for several font-related properties, then:
    - it must include values for:
      <font-size>
      <font-family>
        
    - it may optionally include values for:
      <font-style>
      <font-variant>
      <font-weight>
      <font-stretch>
      <line-height>

    - font-style, font-variant and font-weight must precede font-size.

    - font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps.

    - font-stretch may only be a single keyword value.

    - line-height must immediately follow font-size, preceded by "/", like this: 16px/3.

    - font-family must be the last value specified.
      
  font = [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]

  // font-size font-family
  font: 1.2em "Fira Sans", sans-serif;

  // font-size/line-height font-family
  font: 1.2em/2 "Fira Sans", sans-serif;

  // font-style font-weight font-size font-family
  font: italic bold 1.2em "Fira Sans", sans-serif;

  // font-stretch font-variant font-size font-family 
  font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;
  #*/
  --font-style: normal;
  --font-variant: normal;
  --font-weight: 300; /*# 300 - 400 #*/
  --font-stretch: normal;
  --font-size: 16px;
  --line-height: 1.5;
  --font-family: Lato, "Helvetica Neue", sans-serif;
  /* --font: var(--font-style) var(--font-variant) var(--font-weight) var(--font-stretch) var(--font-size) / var(--line-height) var(--font-family); */
  --letter-spacing: 0.06em;
  
  --accent-color: oklch(0.59 0.11 281.84);
  
  --font-color: oklch(0 0 0);
  --font-color: oklch(0.23 0.04 280.81);
  /*# Use for: h*, pre, th #*/
  --font-color-alt-1: oklch(0.44 0.02 284.16);
  --font-color-alt-1: oklch(0.34 0.02 283.59);
  /*# Use for: blockquote footer, optgroup #*/
  --font-color-alt-2: oklch(0.6 0.02 285.26);
  --font-color-alt-2: oklch(0.49 0.02 283.94);
  
  --background-color: oklch(0.98 0 0);
  /*# Use for: kbd #*/
  --background-color-text-alt-1: oklch(0.36 0.02 285.26);
  /*# Use for: --pre--background, --code--background #*/
  --background-color-text: oklch(0.95 0.01 285.37);
  --background-color-clickable: oklch(0.96 0.01 285.53);
  
  /*# Use for: shadow, focus #*/
  --transparent-color: oklch(from var(--accent-color) l c h / .15);
  
  --href--color: oklch(0.56 0.22 276.32);
  --href--visited-color: oklch(0.42 0.13 279.17);
  
  --shadow-float: 0 3px 10px 0 var(--transparent-color);
  --shadow-clickable: 0 2px 2px 0 var(--transparent-color);
  
  --focus-outline: 0.25rem solid var(--transparent-color);
  --focus--box-shadow: 0 0 0 0.25rem var(--transparent-color);
  
  /*# Use for: --btn--border-color #*/
  --border-color-control: oklch(0.75 0.02 285.18);
  
  --boundary--border-width : 1px;
  --boundary--border-style : solid;
  /*# Use for: .dialog, --blockquote--border-color, --pre--border, --kbd_-kbd--border-color #*/
  /* --boundary--border-color */
  --boundary--border-color : oklch(0.82 0.02 285.18);

  --h--font-family: Montserrat, sans-serif;
  --h--font-weight: 500; /*# 100 - 900 #*/
  --h--line-height: 1;
  --h--letter-spacing: -0.016em;
  --h--color: var(--font-color-alt-1);
  
  /*# Use for: dt, th #*/
  --small-header--font-weight: 500;
  
  --backdrop--background: oklch(0.34 0.03 284.04 / 0.9);
  
  --dialog--border-color: var(--boundary--border-color);

  /* --data-quoter-marker: attr(data-quoter-marker, "\2014 \00A0"); */
  --blockquote--border-width: 0 0 0 4px;
  --blockquote--border-color: var(--boundary--border-color);
  --blockquote__footer--color: var(--font-color-alt-2);
  --blockquote__footer--margin: 1rem 0 0;
  
  --pre--color: var(--font-color-alt-1);
  --pre--background: var(--background-color-text);
  /* --pre--border: var(--boundary--border-width) var(--boundary--border-style) var(--boundary--border-color); */
  
  /*# Use for: code kbd samp #*/
  --cks--font-family: "Sometype Mono", monospace, monospace;
  --cks--font-size: 1.125rem;
  --cks--font-weight: 400; /*# 400 - 700 #*/

  --code--color: var(--font-color);
  --code--background: oklch(from var(--background-color-text) .9 c h / .4);
  /* --code--background: oklch(from var(--background-color-text) l .12 h / .8); */

  --kbd--color: white;
  --kbd--background: var(--background-color-text-alt-1);
  --kbd--border-radius: 3px;
  
  --kbd_-kbd--border-style: solid;
  --kbd_-kbd--border-color: var(--boundary--border-color);
  --kbd_-kbd--border-width: 1px 2px 3px 1px;
  --kbd_-kbd--padding: 0 0.5rem 0.25rem .25rem;
  
  --kbd__kbd--font-weight: 400;
  --kbd__kbd--color: var(--font-color);

  --controls--color: var(--font-color);
  --controls--border-width: 1px; 
  --controls--border-style: solid; 
  --controls--border-color: var(--border-color-control);
  --controls--border-radius: 0.125em;
  --controls--min-height: 1.75rem;
  --controls--padding: 0.125em 0.25em 0.25em;

  --input--background: white;
  
  --btn--font-weight: 400;
  --btn--font-size: var(--font-size);
  --btn--line-height: 1.5;
  /* --btn--font: normal var(--btn--font-weight) var(--btn--font-size) / var(--btn--line-height) var(--font-family); */
  --btn--padding: .2lh .75lh .25lh;

  --moz-input--padding: 0.125em 0.25em 0.25em;
  --moz-input--select-padding: 0.125em 0.25em 0.25em;
  --moz-btn-padding: .2lh .75lh .25lh;
  
  --elements-block-level-space: 1rem;
}