WordPress.org
Get WordPress

Make WordPress Core

Changeset 49728


Ignore:
Timestamp:
12/01/2020 07:25:43 PM (4 years ago)
Author:
desrosj
Message:

Twenty Twenty-One: Sync the latest changes for 5.6 RC2.

This will be the final sync from GitHub before placing that repository into read-only mode. All further changes should now flow entirely through Trac.

For a full list of changes since [49633], see ​https://github.com/WordPress/twentytwentyone/compare/1d5a895...53acd9b.

Props poena, luminuu, kjellr, ryelle, allancole, melchoyce, felipeelia, aljullu, kebbet, chaton666, Clorith, mkaz, ingereck, paaljoachim.
Reviewed by desrosj, SergeyBiryukov.
Merges [49726] to the 5.6 branch.
Fixes #51526.

Location:
branches/5.6
Files:
1 deleted
45 edited

Legend:

Unmodified
Added
Removed

  • branches/5.6

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

    r49633 r49728  
    99
    1010    /* Font Family */
     11    --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
     12    --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    1113
    1214    /* Font Size */
     15    --global--font-size-base: 1.25rem;
     16    --global--font-size-xs: 1rem;
     17    --global--font-size-sm: 1.125rem;
     18    --global--font-size-md: 1.25rem;
     19    --global--font-size-lg: 1.5rem;
     20    --global--font-size-xl: 2.25rem;
     21    --global--font-size-xxl: 4rem;
     22    --global--font-size-xxxl: 5rem;
     23    --global--font-size-page-title: var(--global--font-size-xxl);
     24    --global--letter-spacing: normal;
    1325
    1426    /* Line Height */
     27    --global--line-height-body: 1.7;
     28    --global--line-height-heading: 1.3;
     29    --global--line-height-page-title: 1.1;
    1530
    1631    /* Headings */
     32    --heading--font-family: var(--global--font-primary);
     33    --heading--font-size-h6: var(--global--font-size-xs);
     34    --heading--font-size-h5: var(--global--font-size-sm);
     35    --heading--font-size-h4: var(--global--font-size-lg);
     36    --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
     37    --heading--font-size-h2: var(--global--font-size-xl);
     38    --heading--font-size-h1: var(--global--font-size-page-title);
     39    --heading--letter-spacing-h6: 0.05em;
     40    --heading--letter-spacing-h5: 0.05em;
     41    --heading--letter-spacing-h4: var(--global--letter-spacing);
     42    --heading--letter-spacing-h3: var(--global--letter-spacing);
     43    --heading--letter-spacing-h2: var(--global--letter-spacing);
     44    --heading--letter-spacing-h1: var(--global--letter-spacing);
     45    --heading--line-height-h6: var(--global--line-height-heading);
     46    --heading--line-height-h5: var(--global--line-height-heading);
     47    --heading--line-height-h4: var(--global--line-height-heading);
     48    --heading--line-height-h3: var(--global--line-height-heading);
     49    --heading--line-height-h2: var(--global--line-height-heading);
     50    --heading--line-height-h1: var(--global--line-height-page-title);
     51    --heading--font-weight: normal;
     52    --heading--font-weight-page-title: 300;
     53    --heading--font-weight-strong: 600;
    1754
    1855    /* Block: Latest posts */
     56    --latest-posts--title-font-family: var(--heading--font-family);
     57    --latest-posts--title-font-size: var(--heading--font-size-h3);
     58    --latest-posts--description-font-family: var(--global--font-secondary);
     59    --latest-posts--description-font-size: var(--global--font-size-sm);
     60    --list--font-family: var(--global--font-secondary);
     61    --definition-term--font-family: var(--global--font-primary);
    1962
    2063    /* Colors */
     64    --global--color-black: #000;
     65    --global--color-dark-gray: #28303d;
     66    --global--color-gray: #39414d;
     67    --global--color-light-gray: #f0f0f0;
     68    --global--color-green: #d1e4dd;
     69    --global--color-blue: #d1dfe4;
     70    --global--color-purple: #d1d1e4;
     71    --global--color-red: #e4d1d1;
     72    --global--color-orange: #e4dad1;
     73    --global--color-yellow: #eeeadd;
     74    --global--color-white: #fff;
     75    --global--color-white-50: rgba(255, 255, 255, 0.5);
     76    --global--color-white-90: rgba(255, 255, 255, 0.9);
     77    --global--color-primary: var(--global--color-dark-gray);
    2178
    2279    /* Body text color, site title, footer text color. */
     80    --global--color-secondary: var(--global--color-gray);
    2381
    2482    /* Headings */
     83    --global--color-primary-hover: var(--global--color-primary);
     84    --global--color-background: var(--global--color-green);
    2585
    2686    /* Mint, default body background */
     87    --global--color-border: var(--global--color-primary);
    2788
    2889    /* Used for borders (separators) */
    2990
    3091    /* Spacing */
     92    --global--spacing-unit: 20px;
     93    --global--spacing-measure: unset;
     94    --global--spacing-horizontal: 25px;
     95    --global--spacing-vertical: 30px;
    3196
    3297    /* Elevation */
     98    --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    3399
    34100    /* Forms */
     101    --form--font-family: var(--global--font-secondary);
     102    --form--font-size: var(--global--font-size-sm);
     103    --form--line-height: var(--global--line-height-body);
     104    --form--color-text: var(--global--color-dark-gray);
     105    --form--color-ranged: var(--global--color-secondary);
     106    --form--label-weight: 500;
     107    --form--border-color: var(--global--color-secondary);
     108    --form--border-width: 3px;
     109    --form--border-radius: 0;
     110    --form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
    35111
    36112    /* Cover block */
     113    --cover--height: calc(15 * var(--global--spacing-vertical));
     114    --cover--color-foreground: var(--global--color-white);
     115    --cover--color-background: var(--global--color-black);
    37116
    38117    /* Buttons */
     118    --button--color-text: var(--global--color-background);
     119    --button--color-text-hover: var(--global--color-secondary);
     120    --button--color-text-active: var(--global--color-secondary);
     121    --button--color-background: var(--global--color-secondary);
     122    --button--color-background-active: var(--global--color-background);
     123    --button--font-family: var(--global--font-primary);
     124    --button--font-size: var(--global--font-size-base);
     125    --button--font-weight: 500;
     126    --button--line-height: 1.5;
     127    --button--border-width: 3px;
     128    --button--border-radius: 0;
     129    --button--padding-vertical: 15px;
     130    --button--padding-horizontal: calc(2 * var(--button--padding-vertical));
    39131
    40132    /* entry */
     133    --entry-header--color: var(--global--color-primary);
     134    --entry-header--color-link: currentColor;
     135    --entry-header--color-hover: var(--global--color-primary-hover);
     136    --entry-header--color-focus: var(--global--color-secondary);
     137    --entry-header--font-size: var(--heading--font-size-h2);
     138    --entry-content--font-family: var(--global--font-secondary);
     139    --entry-author-bio--font-family: var(--heading--font-family);
     140    --entry-author-bio--font-size: var(--heading--font-size-h4);
    41141
    42142    /* Header */
     143    --branding--color-text: var(--global--color-primary);
     144    --branding--color-link: var(--global--color-primary);
     145    --branding--color-link-hover: var(--global--color-secondary);
     146    --branding--title--font-family: var(--global--font-primary);
     147    --branding--title--font-size: var(--global--font-size-lg);
     148    --branding--title--font-size-mobile: var(--heading--font-size-h4);
     149    --branding--title--font-weight: normal;
     150    --branding--title--text-transform: uppercase;
     151    --branding--description--font-family: var(--global--font-secondary);
     152    --branding--description--font-size: var(--global--font-size-sm);
     153    --branding--description--font-family: var(--global--font-secondary);
     154    --branding--logo--max-width: 300px;
     155    --branding--logo--max-height: 100px;
     156    --branding--logo--max-width-mobile: 96px;
     157    --branding--logo--max-height-mobile: 96px;
    43158
    44159    /* Main navigation */
     160    --primary-nav--font-family: var(--global--font-secondary);
     161    --primary-nav--font-family-mobile: var(--global--font-primary);
     162    --primary-nav--font-size: var(--global--font-size-md);
     163    --primary-nav--font-size-sub-menu: var(--global--font-size-xs);
     164    --primary-nav--font-size-mobile: var(--global--font-size-sm);
     165    --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
     166    --primary-nav--font-size-button: var(--global--font-size-xs);
     167    --primary-nav--font-style: normal;
     168    --primary-nav--font-style-sub-menu-mobile: normal;
     169    --primary-nav--font-weight: normal;
     170    --primary-nav--font-weight-button: 500;
     171    --primary-nav--color-link: var(--global--color-primary);
     172    --primary-nav--color-link-hover: var(--global--color-primary-hover);
     173    --primary-nav--color-text: var(--global--color-primary);
     174    --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
     175    --primary-nav--border-color: var(--global--color-primary);
    45176
    46177    /* Pagination */
     178    --pagination--color-text: var(--global--color-primary);
     179    --pagination--color-link-hover: var(--global--color-primary-hover);
     180    --pagination--font-family: var(--global--font-secondary);
     181    --pagination--font-size: var(--global--font-size-lg);
     182    --pagination--font-weight: normal;
     183    --pagination--font-weight-strong: 600;
    47184
    48185    /* Footer */
     186    --footer--color-text: var(--global--color-primary);
     187    --footer--color-link: var(--global--color-primary);
     188    --footer--color-link-hover: var(--global--color-primary-hover);
     189    --footer--font-family: var(--global--font-primary);
     190    --footer--font-size: var(--global--font-size-sm);
    49191
    50192    /* Block: Pull quote */
     193    --pullquote--font-family: var(--global--font-primary);
     194    --pullquote--font-size: var(--heading--font-size-h3);
     195    --pullquote--font-style: normal;
     196    --pullquote--letter-spacing: var(--heading--letter-spacing-h4);
     197    --pullquote--line-height: var(--global--line-height-heading);
     198    --pullquote--border-width: 3px;
     199    --pullquote--border-color: var(--global--color-primary);
     200    --pullquote--color-foreground: var(--global--color-primary);
     201    --pullquote--color-background: var(--global--color-background);
     202    --quote--font-family: var(--global--font-secondary);
     203    --quote--font-size: var(--global--font-size-md);
     204    --quote--font-size-large: var(--global--font-size-xl);
     205    --quote--font-style: normal;
     206    --quote--font-weight: 700;
     207    --quote--font-weight-strong: bolder;
     208    --quote--font-style-large: normal;
     209    --quote--font-style-cite: normal;
     210    --quote--line-height: var(--global--line-height-body);
     211    --quote--line-height-large: 1.35;
     212    --separator--border-color: var(--global--color-border);
     213    --separator--height: 1px;
    51214
    52215    /* Block: Table */
     216    --table--stripes-border-color: var(--global--color-light-gray);
     217    --table--stripes-background-color: var(--global--color-light-gray);
     218    --table--has-background-text-color: var(--global--color-dark-gray);
    53219
    54220    /* Widgets */
     221    --widget--line-height-list: 1.9;
     222    --widget--line-height-title: 1.4;
     223    --widget--font-weight-title: 700;
     224    --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
    55225
    56226    /* Admin-bar height */
     227    --global--admin-bar--height: 0;
     228}
     229
     230.admin-bar {
     231    --global--admin-bar--height: 32px;
     232}
     233@media only screen and (max-width: 782px) {
     234
     235    .admin-bar {
     236        --global--admin-bar--height: 46px;
     237    }
     238}
     239
     240@media only screen and (min-width: 652px) {
     241
     242    :root {
     243        --global--font-size-xl: 2.5rem;
     244        --global--font-size-xxl: 6rem;
     245        --global--font-size-xxxl: 9rem;
     246        --heading--font-size-h3: 2rem;
     247        --heading--font-size-h2: 3rem;
     248    }
    57249}
    58250
    … …  
    68260 * Root Media Query Variables
    69261 */
     262:root {
     263    --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
     264    --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
     265    --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
     266    --responsive--alignfull-width: 100%;
     267    --responsive--alignright-margin: var(--global--spacing-horizontal);
     268    --responsive--alignleft-margin: var(--global--spacing-horizontal);
     269}
     270
     271@media only screen and (min-width: 482px) {
     272
     273    :root {
     274        --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
     275        --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
     276        --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     277        --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     278    }
     279}
     280@media only screen and (min-width: 822px) {
     281
     282    :root {
     283        --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
     284        --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
     285    }
     286}
    70287
    71288/**
    … …  
    73290 */
    74291.default-max-width {
    75     max-width: calc(100vw - 30px);
     292    max-width: var(--responsive--aligndefault-width);
    76293    margin-left: auto;
    77294    margin-right: auto;
    78295}
    79 @media only screen and (min-width: 482px) {
    80 
    81     .default-max-width {
    82         max-width: min(calc(100vw - 100px), 610px);
    83     }
    84 }
    85 @media only screen and (min-width: 822px) {
    86 
    87     .default-max-width {
    88         max-width: min(calc(100vw - 200px), 610px);
    89     }
    90 }
    91296
    92297.wide-max-width {
    93     max-width: calc(100vw - 30px);
     298    max-width: var(--responsive--alignwide-width);
    94299    margin-left: auto;
    95300    margin-right: auto;
    … …  
    98303@media only screen and (min-width: 482px) {
    99304
    100     .wide-max-width {
    101         max-width: calc(100vw - 100px);
    102     }
    103 }
    104 
    105 @media only screen and (min-width: 822px) {
    106 
    107     .wide-max-width {
    108         max-width: min(calc(100vw - 200px), 1240px);
    109     }
    110 }
    111 
    112 @media only screen and (min-width: 482px) {
    113 
    114305    .full-max-width {
    115         max-width: 100%;
     306        max-width: var(--responsive--alignfull-width);
    116307        width: auto;
    117308        margin-left: auto;
    … …  
    123314    padding: 0;
    124315    position: relative;
    125     margin: 30px 0 30px 25px;
     316    margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
    126317}
    127318
    128319blockquote > * {
    129     margin-top: 20px;
    130     margin-bottom: 20px;
     320    margin-top: var(--global--spacing-unit);
     321    margin-bottom: var(--global--spacing-unit);
    131322}
    132323
    … …  
    140331
    141332blockquote p {
    142     letter-spacing: normal;
    143     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    144     font-size: 1.25rem;
    145     font-style: normal;
    146     font-weight: 700;
    147     line-height: 1.7;
    148 }
    149 
    150 blockquote cite {
    151     font-weight: normal;
    152     color: #28303d;
    153     font-size: 1rem;
    154     letter-spacing: normal;
    155 }
    156 
     333    letter-spacing: var(--heading--letter-spacing-h4);
     334    font-family: var(--quote--font-family);
     335    font-size: var(--quote--font-size);
     336    font-style: var(--quote--font-style);
     337    font-weight: var(--quote--font-weight);
     338    line-height: var(--quote--line-height);
     339}
     340
     341blockquote cite,
    157342blockquote footer {
    158343    font-weight: normal;
    159     color: #28303d;
    160     font-size: 1rem;
    161     letter-spacing: normal;
     344    color: var(--global--color-primary);
     345    font-size: var(--global--font-size-xs);
     346    letter-spacing: var(--global--letter-spacing);
    162347}
    163348
    … …  
    167352}
    168353
    169 blockquote.alignleft p {
    170     font-size: 1.125rem;
     354blockquote.alignleft p,
     355blockquote.alignright p {
     356    font-size: var(--heading--font-size-h5);
    171357    max-width: inherit;
    172358    width: inherit;
    173359}
    174360
    175 blockquote.alignright p {
    176     font-size: 1.125rem;
    177     max-width: inherit;
    178     width: inherit;
    179 }
    180 
    181 blockquote.alignleft cite {
    182     font-size: 1rem;
    183     letter-spacing: normal;
    184 }
    185 
    186 blockquote.alignleft footer {
    187     font-size: 1rem;
    188     letter-spacing: normal;
    189 }
    190 
    191 blockquote.alignright cite {
    192     font-size: 1rem;
    193     letter-spacing: normal;
    194 }
    195 
     361blockquote.alignleft cite,
     362blockquote.alignleft footer,
     363blockquote.alignright cite,
    196364blockquote.alignright footer {
    197     font-size: 1rem;
    198     letter-spacing: normal;
     365    font-size: var(--global--font-size-xs);
     366    letter-spacing: var(--global--letter-spacing);
    199367}
    200368
    201369blockquote strong {
    202     font-weight: bolder;
     370    font-weight: var(--quote--font-weight-strong);
    203371}
    204372
    205373blockquote:before {
    206374    content: "“";
    207     font-size: 1.25rem;
    208     line-height: 1.7;
    209 }
    210 
    211 blockquote .wp-block-quote__citation {
    212     color: #28303d;
    213     font-size: 1rem;
    214     font-style: normal;
    215 }
    216 
    217 blockquote cite {
    218     color: #28303d;
    219     font-size: 1rem;
    220     font-style: normal;
    221 }
    222 
     375    font-size: var(--quote--font-size);
     376    line-height: var(--quote--line-height);
     377    position: absolute;
     378    left: calc(-0.5 * var(--global--spacing-horizontal));
     379}
     380
     381blockquote .wp-block-quote__citation,
     382blockquote cite,
    223383blockquote footer {
    224     color: #28303d;
    225     font-size: 1rem;
    226     font-style: normal;
     384    color: var(--global--color-primary);
     385    font-size: var(--global--font-size-xs);
     386    font-style: var(--quote--font-style-cite);
    227387}
    228388@media only screen and (max-width: 481px) {
    229389
    230390    blockquote {
    231         padding-left: 13px;
     391        padding-left: calc(0.5 * var(--global--spacing-horizontal));
    232392    }
    233393
    … …  
    257417
    258418/* Media captions */
    259 figcaption {
     419figcaption,
     420.wp-caption,
     421.wp-caption-text,
     422.wp-block-embed figcaption {
    260423    color: currentColor;
    261     font-size: 1rem;
    262     line-height: 1.7;
    263     margin-top: 10px;
    264     margin-bottom: 20px;
    265     text-align: center;
    266 }
    267 
    268 .wp-caption {
    269     color: currentColor;
    270     font-size: 1rem;
    271     line-height: 1.7;
    272     margin-top: 10px;
    273     margin-bottom: 20px;
    274     text-align: center;
    275 }
    276 
    277 .wp-caption-text {
    278     color: currentColor;
    279     font-size: 1rem;
    280     line-height: 1.7;
    281     margin-top: 10px;
    282     margin-bottom: 20px;
     424    font-size: var(--global--font-size-xs);
     425    line-height: var(--global--line-height-body);
     426    margin-top: calc(0.5 * var(--global--spacing-unit));
     427    margin-bottom: var(--global--spacing-unit);
    283428    text-align: center;
    284429}
    … …  
    289434.alignright .wp-caption,
    290435.alignleft .wp-caption-text,
    291 .alignright .wp-caption-text {
     436.alignright .wp-caption-text,
     437.alignleft .wp-block-embed figcaption,
     438.alignright .wp-block-embed figcaption {
    292439    margin-bottom: 0;
    293440}
    … …  
    304451
    305452select {
    306     border: 3px solid #39414d;
    307     border-radius: 0;
    308     color: #28303d;
    309     font-size: 1.125rem;
     453    border: var(--form--border-width) solid var(--form--border-color);
     454    border-radius: var(--form--border-radius);
     455    color: var(--form--color-text);
     456    font-size: var(--form--font-size);
    310457    -moz-appearance: none;
    311458    -webkit-appearance: none;
    312459    appearance: none;
    313     padding: 10px 30px 10px 10px;
    314     background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
    315     background-position: right 10px top 60%;
     460    padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
     461    background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
     462    background-position: right var(--form--spacing-unit) top 60%;
    316463}
    317464
    … …  
    323470a {
    324471    cursor: pointer;
    325     color: #28303d;
     472    color: var(--wp--style--color--link, var(--global--color-primary));
    326473    text-underline-offset: 3px;
    327474    text-decoration-skip-ink: all;
    … …  
    333480}
    334481
    335 .site a:focus {
     482.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    336483
    337484    /* Only visible in Windows High Contrast mode */
    338485    outline: 2px solid transparent;
     486    text-decoration: underline 1px dotted currentColor;
     487    text-decoration-skip-ink: none;
    339488    background: rgba(255, 255, 255, 0.9);
    340489}
    341490
    342 .is-dark-theme .site a:focus {
    343     color: #d1e4dd;
    344 }
    345 
    346 .is-dark-theme .site a:focus .meta-nav {
    347     color: #d1e4dd;
    348 }
    349 
    350 .has-background-white .site a:focus {
     491.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     492.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
     493    color: var(--wp--style--color--link, var(--global--color-background));
     494}
     495
     496.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    351497    background: rgba(0, 0, 0, 0.9);
    352     color: #fff;
    353 }
    354 
    355 .has-background-white .site a:focus .meta-nav {
    356     color: #fff;
    357 }
    358 
    359 .site a:focus.skip-link {
     498    color: var(--wp--style--color--link, var(--global--color-white));
     499}
     500
     501.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
     502    color: var(--wp--style--color--link, var(--global--color-white));
     503}
     504
     505.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link {
    360506
    361507    /* Only visible in Windows High Contrast mode */
    … …  
    364510}
    365511
    366 .site a:focus.skip-link:focus {
     512.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus {
    367513    color: #21759b;
    368514    background-color: #f1f1f1;
    369515}
    370516
    371 .site a:focus img {
    372     outline: 2px dotted #28303d;
    373 }
    374 
    375 .has-background:not(.has-background-background-color) .has-link-color a {
    376     color: #28303d;
    377 }
    378 
    379 .has-background:not(.has-background-background-color).has-link-color a {
    380     color: #28303d;
     517.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
     518    outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
     519}
     520
     521.has-background .has-link-color a,
     522.has-background.has-link-color a {
     523    color: var(--wp--style--color--link, var(--global--color-primary));
    381524}
    382525
    383526.wp-block-button__link {
    384     line-height: 1.5;
    385     color: #d1e4dd;
     527    line-height: var(--button--line-height);
     528    color: var(--button--color-text);
    386529    cursor: pointer;
    387     font-weight: 500;
    388     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    389     font-size: 1.25rem;
    390     background-color: #39414d;
    391     border-radius: 0;
    392     border: 3px solid #39414d;
     530    font-weight: var(--button--font-weight);
     531    font-family: var(--button--font-family);
     532    font-size: var(--button--font-size);
     533    background-color: var(--button--color-background);
     534    border-radius: var(--button--border-radius);
     535    border: var(--button--border-width) solid var(--button--color-background);
    393536    text-decoration: none;
    394     padding: 15px 30px;
    395 }
    396 
    397 .wp-block-button__link:before,
    398 .wp-block-button__link:after {
    399     content: "";
    400     display: block;
    401     height: 0;
    402     width: 0;
    403 }
    404 
    405 .wp-block-button__link:before {
    406     margin-bottom: -calc(1em - 0);
    407 }
    408 
    409 .wp-block-button__link:after {
    410     margin-top: -calc(1em - 0);
     537    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    411538}
    412539
    … …  
    418545
    419546.is-dark-theme .wp-block-button__link:focus {
    420     color: #39414d;
     547    color: var(--button--color-background);
    421548}
    422549
    423550.wp-block-button__link:focus:not(.has-background) {
    424     color: #39414d;
     551    color: var(--button--color-text-hover);
    425552}
    426553
    427554.wp-block-button__link:disabled {
    428     background-color: rgba(255, 255, 255, 0.5);
    429     border-color: rgba(255, 255, 255, 0.5);
    430     color: #39414d;
     555    background-color: var(--global--color-white-50);
     556    border-color: var(--global--color-white-50);
     557    color: var(--button--color-text-active);
    431558}
    432559
    … …  
    440567
    441568[data-block].wp-block-buttons .wp-block-button:first-child {
    442     margin-top: 30px;
     569    margin-top: var(--global--spacing-vertical);
    443570}
    444571
    445572[data-block].wp-block-buttons .wp-block-button:last-child {
    446     margin-bottom: 30px;
     573    margin-bottom: var(--global--spacing-vertical);
    447574}
    448575
    449576.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
    450     color: #39414d !important;
     577    color: var(--button--color-text-active) !important;
    451578    background: transparent !important;
    452     border-color: #39414d;
     579    border-color: var(--button--color-background);
    453580}
    454581
    455582.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    456     color: #39414d !important;
     583    color: var(--button--color-text-hover) !important;
    457584    background: transparent !important;
    458     border-color: #39414d;
     585    border-color: var(--button--color-background);
    459586}
    460587
    461588.wp-block-button.is-style-outline .wp-block-button__link {
    462     color: #39414d;
     589    color: var(--button--color-background);
    463590    background: transparent;
    464     border: 3px solid currentColor;
    465     padding: 15px 30px;
    466 }
    467 
    468 .wp-block-button.is-style-outline .wp-block-button__link:active {
    469     background-color: #39414d;
    470     color: #d1e4dd;
    471     border-color: #39414d;
    472 }
    473 
     591    border: var(--button--border-width) solid currentColor;
     592    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     593}
     594
     595.wp-block-button.is-style-outline .wp-block-button__link:active,
    474596.wp-block-button.is-style-outline .wp-block-button__link:hover {
    475     background-color: #39414d;
    476     color: #d1e4dd;
    477     border-color: #39414d;
     597    background-color: var(--button--color-background);
     598    color: var(--button--color-text);
     599    border-color: var(--button--color-background);
    478600}
    479601
    480602.wp-block-button.is-style-outline .wp-block-button__link.has-background {
    481     border-color: #39414d;
    482 }
    483 
    484 .wp-block-button.is-style-outline .wp-block-button__link.has-background:active {
    485     background-color: #39414d !important;
    486 }
    487 
     603    border-color: var(--button--color-background);
     604}
     605
     606.wp-block-button.is-style-outline .wp-block-button__link.has-background:active,
    488607.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
    489     background-color: #39414d !important;
     608    background-color: var(--button--color-background) !important;
    490609}
    491610
    492611.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
    493     color: #28303d;
    494 }
    495 
    496 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
    497     color: #fff;
    498 }
    499 
    500 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
    501     color: #fff;
    502 }
    503 
     612    color: var(--global--color-dark-gray);
     613}
     614
     615.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
     616.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
    504617.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
    505     color: #fff;
    506 }
    507 
    508 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color {
    509     color: #28303d;
    510 }
    511 
    512 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color {
    513     color: #28303d;
    514 }
    515 
    516 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color {
    517     color: #28303d;
    518 }
    519 
    520 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color {
    521     color: #28303d;
    522 }
    523 
    524 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color {
    525     color: #28303d;
    526 }
    527 
    528 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color {
    529     color: #28303d;
    530 }
    531 
     618    color: var(--global--color-white);
     619}
     620
     621.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color,
     622.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color,
     623.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color,
     624.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color,
     625.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color,
     626.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color,
    532627.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
    533     color: #28303d;
     628    color: var(--global--color-dark-gray);
    534629}
    535630
    … …  
    538633}
    539634
    540 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active {
    541     color: #d1e4dd !important;
    542     border-color: #39414d;
    543 }
    544 
     635.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active,
    545636.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
    546     color: #d1e4dd !important;
    547     border-color: #39414d;
     637    color: var(--button--color-text) !important;
     638    border-color: var(--button--color-background);
    548639}
    549640
    … …  
    558649
    559650.wp-block-code code {
    560     font-size: 1rem;
     651    font-size: var(--global--font-size-xs);
    561652    white-space: pre !important;
    562653    overflow-x: auto;
    … …  
    564655
    565656.wp-block-code {
    566     border-color: #28303d;
     657    border-color: var(--global--color-border);
    567658    border-radius: 0;
    568659    border-style: solid;
    569660    border-width: 0.1rem;
    570     padding: 20px;
     661    padding: var(--global--spacing-unit);
    571662    color: currentColor;
    572663}
    573664
    574 .wp-block-cover {
    575     background-color: #000;
    576     min-height: 450px;
    577     margin-top: inherit;
    578     margin-bottom: inherit;
    579 }
    580 
     665.wp-block-cover,
    581666.wp-block-cover-image {
    582     background-color: #000;
    583     min-height: 450px;
     667    background-color: var(--cover--color-background);
     668    min-height: var(--cover--height);
    584669    margin-top: inherit;
    585670    margin-bottom: inherit;
    … …  
    594679[data-align=full] .wp-block-cover-image {
    595680    margin-top: 0;
     681    margin-bottom: 0;
     682}
     683
     684.wp-block-cover > .wp-block-cover__inner-container > *:first-child,
     685.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child {
     686    margin-top: 0;
     687}
     688
     689.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender),
     690.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) {
     691    margin-bottom: 0;
     692}
     693
     694.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     695.wp-block-cover.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     696.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     697.wp-block-cover-image.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2) {
    596698    margin-bottom: 0;
    597699}
    … …  
    619721}
    620722
    621 .wp-block-cover .wp-block-cover__inner-container .has-link-color a {
    622     color: #28303d;
    623 }
    624 
    625 .wp-block-cover .wp-block-cover-image-text .has-link-color a {
    626     color: #28303d;
    627 }
    628 
    629 .wp-block-cover .wp-block-cover-text .has-link-color a {
    630     color: #28303d;
    631 }
    632 
    633 .wp-block-cover .block-editor-block-list__block .has-link-color a {
    634     color: #28303d;
    635 }
    636 
    637 .wp-block-cover-image .wp-block-cover__inner-container .has-link-color a {
    638     color: #28303d;
    639 }
    640 
    641 .wp-block-cover-image .wp-block-cover-image-text .has-link-color a {
    642     color: #28303d;
    643 }
    644 
    645 .wp-block-cover-image .wp-block-cover-text .has-link-color a {
    646     color: #28303d;
    647 }
    648 
     723.wp-block-cover .wp-block-cover__inner-container .has-link-color a,
     724.wp-block-cover .wp-block-cover-image-text .has-link-color a,
     725.wp-block-cover .wp-block-cover-text .has-link-color a,
     726.wp-block-cover .block-editor-block-list__block .has-link-color a,
     727.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a,
     728.wp-block-cover-image .wp-block-cover-image-text .has-link-color a,
     729.wp-block-cover-image .wp-block-cover-text .has-link-color a,
    649730.wp-block-cover-image .block-editor-block-list__block .has-link-color a {
    650     color: #28303d;
    651 }
    652 
    653 .wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container {
    654     color: #fff;
    655 }
    656 
    657 .wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text {
    658     color: #fff;
    659 }
    660 
    661 .wp-block-cover:not([class*=background-color]) .wp-block-cover-text {
    662     color: #fff;
    663 }
    664 
    665 .wp-block-cover:not([class*=background-color]) .block-editor-block-list__block {
    666     color: #fff;
    667 }
    668 
    669 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container {
    670     color: #fff;
    671 }
    672 
    673 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text {
    674     color: #fff;
    675 }
    676 
    677 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text {
    678     color: #fff;
    679 }
    680 
     731    color: var(--wp--style--color--link, var(--global--color-primary));
     732}
     733
     734.wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container,
     735.wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text,
     736.wp-block-cover:not([class*=background-color]) .wp-block-cover-text,
     737.wp-block-cover:not([class*=background-color]) .block-editor-block-list__block,
     738.wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container,
     739.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text,
     740.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text,
    681741.wp-block-cover-image:not([class*=background-color]) .block-editor-block-list__block {
    682     color: #fff;
    683 }
    684 
    685 .wp-block-cover h2 {
    686     font-size: 2.25rem;
    687     letter-spacing: normal;
    688     line-height: 1.3;
     742    color: var(--cover--color-foreground);
     743}
     744
     745.wp-block-cover h2,
     746.wp-block-cover-image h2 {
     747    font-size: var(--heading--font-size-h2);
     748    letter-spacing: var(--heading--letter-spacing-h2);
     749    line-height: var(--heading--line-height-h2);
    689750    padding: 0;
    690751    max-width: inherit;
    691752    text-align: inherit;
    692753}
    693 @media only screen and (min-width: 652px) {
    694 
    695     .wp-block-cover h2 {
    696         font-size: 3rem;
    697     }
    698 }
    699 @media only screen and (min-width: 652px) {
    700 
    701     .wp-block-cover h2 {
    702         font-size: 3rem;
    703     }
    704 }
    705 
    706 .wp-block-cover-image h2 {
    707     font-size: 2.25rem;
    708     letter-spacing: normal;
    709     line-height: 1.3;
    710     padding: 0;
    711     max-width: inherit;
    712     text-align: inherit;
    713 }
    714 @media only screen and (min-width: 652px) {
    715 
    716     .wp-block-cover-image h2 {
    717         font-size: 3rem;
    718     }
    719 }
    720 @media only screen and (min-width: 652px) {
    721 
    722     .wp-block-cover-image h2 {
    723         font-size: 3rem;
    724     }
    725 }
    726754
    727755.wp-block-cover h2.has-text-align-left,
    … …  
    740768}
    741769
    742 .wp-block-cover.is-style-twentytwentyone-border {
    743     border: 3px solid #28303d;
    744 }
    745 
     770.wp-block-cover.is-style-twentytwentyone-border,
    746771.wp-block-cover-image.is-style-twentytwentyone-border {
    747     border: 3px solid #28303d;
     772    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    748773}
    749774
    … …  
    756781    max-width: inherit;
    757782}
     783
     784.wp-block-columns > .wp-block-column > *:first-child {
     785    margin-top: 0;
     786}
     787
     788.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) {
     789    margin-bottom: 0;
     790}
     791
     792.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2),
     793.wp-block-columns.is-selected > .wp-block-column > *:nth-last-child(2) {
     794    margin-bottom: 0;
     795}
    758796@media only screen and (min-width: 652px) {
    759797
    760798    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    761         margin-left: -50px;
    762         margin-top: 63px;
     799        margin-left: calc(-2 * var(--global--spacing-horizontal));
     800        margin-top: calc(2.5 * var(--global--spacing-horizontal));
    763801        z-index: 2;
    764802    }
    765803
    766     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background) {
    767         background-color: #d1e4dd;
    768         padding: 20px;
    769     }
    770 
    771     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background) {
    772         background-color: #d1e4dd;
    773         padding: 20px;
    774     }
    775 
    776     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background) {
    777         background-color: #d1e4dd;
    778         padding: 20px;
    779     }
    780 
    781     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background) {
    782         background-color: #d1e4dd;
    783         padding: 20px;
    784     }
    785 
    786     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background) {
    787         background-color: #d1e4dd;
    788         padding: 20px;
    789     }
    790 
    791     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background) {
    792         background-color: #d1e4dd;
    793         padding: 20px;
    794     }
    795 
    796     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background) {
    797         background-color: #d1e4dd;
    798         padding: 20px;
    799     }
    800 
    801     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) {
    802         background-color: #d1e4dd;
    803         padding: 20px;
    804     }
    805 
     804    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background),
     805    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background),
     806    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background),
     807    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background),
     808    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background),
     809    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background),
     810    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background),
     811    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
     812    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background),
     813    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
     814        background-color: var(--global--color-background);
     815        padding: var(--global--spacing-unit);
     816    }
     817
     818    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
    806819    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
    807         background-color: #d1e4dd;
    808         padding: 20px;
    809     }
    810 
    811     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
    812         background-color: #d1e4dd;
    813         padding: 20px;
    814     }
    815 
    816     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) {
    817         padding-left: 50px;
    818     }
    819 
    820     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
    821         padding-left: 50px;
     820        padding-left: calc(2 * var(--global--spacing-horizontal));
    822821    }
    823822
    … …  
    827826}
    828827
    829 .wp-block[data-align=full] .wp-block-columns p:not(.has-background) {
    830     padding-left: 20px;
    831     padding-right: 20px;
    832 }
    833 
    834 .wp-block[data-align=full] .wp-block-columns h1:not(.has-background) {
    835     padding-left: 20px;
    836     padding-right: 20px;
    837 }
    838 
    839 .wp-block[data-align=full] .wp-block-columns h2:not(.has-background) {
    840     padding-left: 20px;
    841     padding-right: 20px;
    842 }
    843 
    844 .wp-block[data-align=full] .wp-block-columns h3:not(.has-background) {
    845     padding-left: 20px;
    846     padding-right: 20px;
    847 }
    848 
    849 .wp-block[data-align=full] .wp-block-columns h4:not(.has-background) {
    850     padding-left: 20px;
    851     padding-right: 20px;
    852 }
    853 
    854 .wp-block[data-align=full] .wp-block-columns h5:not(.has-background) {
    855     padding-left: 20px;
    856     padding-right: 20px;
    857 }
    858 
    859 .wp-block[data-align=full] .wp-block-columns h6:not(.has-background) {
    860     padding-left: 20px;
    861     padding-right: 20px;
     828.wp-block[data-align=full] > .wp-block-columns p:not(.has-background),
     829.wp-block[data-align=full] > .wp-block-columns h1:not(.has-background),
     830.wp-block[data-align=full] > .wp-block-columns h2:not(.has-background),
     831.wp-block[data-align=full] > .wp-block-columns h3:not(.has-background),
     832.wp-block[data-align=full] > .wp-block-columns h4:not(.has-background),
     833.wp-block[data-align=full] > .wp-block-columns h5:not(.has-background),
     834.wp-block[data-align=full] > .wp-block-columns h6:not(.has-background) {
     835    padding-left: var(--global--spacing-unit);
     836    padding-right: var(--global--spacing-unit);
    862837}
    863838
    … …  
    874849
    875850.wp-block-file .wp-block-file__button {
    876     line-height: 1.5;
    877     color: #d1e4dd;
     851    line-height: var(--button--line-height);
     852    color: var(--button--color-text);
    878853    cursor: pointer;
    879     font-weight: 500;
    880     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    881     font-size: 1.25rem;
    882     background-color: #39414d;
    883     border-radius: 0;
    884     border: 3px solid #39414d;
     854    font-weight: var(--button--font-weight);
     855    font-family: var(--button--font-family);
     856    font-size: var(--button--font-size);
     857    background-color: var(--button--color-background);
     858    border-radius: var(--button--border-radius);
     859    border: var(--button--border-width) solid var(--button--color-background);
    885860    text-decoration: none;
    886     padding: 15px 30px;
     861    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    887862    display: inline-block;
    888 }
    889 
    890 .wp-block-file .wp-block-file__button:before,
    891 .wp-block-file .wp-block-file__button:after {
    892     content: "";
    893     display: block;
    894     height: 0;
    895     width: 0;
    896 }
    897 
    898 .wp-block-file .wp-block-file__button:before {
    899     margin-bottom: -calc(1em - 0);
    900 }
    901 
    902 .wp-block-file .wp-block-file__button:after {
    903     margin-top: -calc(1em - 0);
    904863}
    905864
    … …  
    911870
    912871.is-dark-theme .wp-block-file .wp-block-file__button:focus {
    913     color: #39414d;
     872    color: var(--button--color-background);
    914873}
    915874
    916875.wp-block-file .wp-block-file__button:focus:not(.has-background) {
    917     color: #39414d;
     876    color: var(--button--color-text-hover);
    918877}
    919878
    920879.wp-block-file .wp-block-file__button:disabled {
    921     background-color: rgba(255, 255, 255, 0.5);
    922     border-color: rgba(255, 255, 255, 0.5);
    923     color: #39414d;
     880    background-color: var(--global--color-white-50);
     881    border-color: var(--global--color-white-50);
     882    color: var(--button--color-text-active);
    924883}
    925884
    926885.wp-block-file .wp-block-file__button:hover {
    927     color: #39414d;
     886    color: var(--button--color-text-hover);
    928887    background: transparent;
    929888}
    … …  
    934893
    935894.wp-block-gallery figcaption a {
    936     color: #fff;
     895    color: var(--global--color-white);
    937896}
    938897
    … …  
    951910
    952911.wp-block-group.has-background {
    953     padding: 30px;
     912    padding: var(--global--spacing-vertical);
    954913}
    955914
    … …  
    960919
    961920.wp-block-group.is-style-twentytwentyone-border {
    962     border: 3px solid #28303d;
    963     padding: 30px;
     921    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     922    padding: var(--global--spacing-vertical);
    964923}
    965924
    966925.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align=full] {
    967     max-width: calc(100% + 60px);
    968     width: calc(100% + 60px);
    969     margin-left: -30px;
    970 }
    971 
    972 .wp-block-group .wp-block-group__inner-container > *:last-child {
     926    max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
     927    width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
     928    margin-left: calc(-1 * var(--global--spacing-vertical));
     929}
     930
     931.wp-block-group > .wp-block-group__inner-container > *:first-child {
     932    margin-top: 0;
     933}
     934
     935.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) {
     936    margin-bottom: 0;
     937}
     938
     939.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2),
     940.wp-block-group.is-selected > .wp-block-group__inner-container > *:nth-last-child(2) {
    973941    margin-bottom: 0;
    974942}
    … …  
    979947}
    980948
    981 .wp-block-heading h1 {
    982     clear: both;
    983     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    984     font-weight: normal;
    985 }
    986 
    987 h1 {
    988     clear: both;
    989     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    990     font-weight: normal;
    991 }
    992 
    993 .h1 {
    994     clear: both;
    995     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    996     font-weight: normal;
    997 }
    998 
    999 .wp-block-heading h2 {
    1000     clear: both;
    1001     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1002     font-weight: normal;
    1003 }
    1004 
    1005 h2 {
    1006     clear: both;
    1007     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1008     font-weight: normal;
    1009 }
    1010 
    1011 .h2 {
    1012     clear: both;
    1013     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1014     font-weight: normal;
    1015 }
    1016 
    1017 .wp-block-heading h3 {
    1018     clear: both;
    1019     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1020     font-weight: normal;
    1021 }
    1022 
    1023 h3 {
    1024     clear: both;
    1025     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1026     font-weight: normal;
    1027 }
    1028 
    1029 .h3 {
    1030     clear: both;
    1031     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1032     font-weight: normal;
    1033 }
    1034 
    1035 .wp-block-heading h4 {
    1036     clear: both;
    1037     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1038     font-weight: normal;
    1039 }
    1040 
    1041 h4 {
    1042     clear: both;
    1043     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1044     font-weight: normal;
    1045 }
    1046 
    1047 .h4 {
    1048     clear: both;
    1049     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1050     font-weight: normal;
    1051 }
    1052 
    1053 .wp-block-heading h5 {
    1054     clear: both;
    1055     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1056     font-weight: normal;
    1057 }
    1058 
    1059 h5 {
    1060     clear: both;
    1061     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1062     font-weight: normal;
    1063 }
    1064 
    1065 .h5 {
    1066     clear: both;
    1067     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1068     font-weight: normal;
    1069 }
    1070 
    1071 .wp-block-heading h6 {
    1072     clear: both;
    1073     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1074     font-weight: normal;
    1075 }
    1076 
    1077 h6 {
    1078     clear: both;
    1079     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1080     font-weight: normal;
    1081 }
    1082 
     949.wp-block-heading h1,
     950h1,
     951.h1,
     952.wp-block-heading h2,
     953h2,
     954.h2,
     955.wp-block-heading h3,
     956h3,
     957.h3,
     958.wp-block-heading h4,
     959h4,
     960.h4,
     961.wp-block-heading h5,
     962h5,
     963.h5,
     964.wp-block-heading h6,
     965h6,
    1083966.h6 {
    1084967    clear: both;
    1085     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1086     font-weight: normal;
    1087 }
    1088 
    1089 .wp-block-heading h1 strong {
    1090     font-weight: 600;
    1091 }
    1092 
    1093 h1 strong {
    1094     font-weight: 600;
    1095 }
    1096 
    1097 .h1 strong {
    1098     font-weight: 600;
    1099 }
    1100 
    1101 .wp-block-heading h2 strong {
    1102     font-weight: 600;
    1103 }
    1104 
    1105 h2 strong {
    1106     font-weight: 600;
    1107 }
    1108 
    1109 .h2 strong {
    1110     font-weight: 600;
    1111 }
    1112 
    1113 .wp-block-heading h3 strong {
    1114     font-weight: 600;
    1115 }
    1116 
    1117 h3 strong {
    1118     font-weight: 600;
    1119 }
    1120 
    1121 .h3 strong {
    1122     font-weight: 600;
    1123 }
    1124 
    1125 .wp-block-heading h4 strong {
    1126     font-weight: 600;
    1127 }
    1128 
    1129 h4 strong {
    1130     font-weight: 600;
    1131 }
    1132 
    1133 .h4 strong {
    1134     font-weight: 600;
    1135 }
    1136 
    1137 .wp-block-heading h5 strong {
    1138     font-weight: 600;
    1139 }
    1140 
    1141 h5 strong {
    1142     font-weight: 600;
    1143 }
    1144 
    1145 .h5 strong {
    1146     font-weight: 600;
    1147 }
    1148 
    1149 .wp-block-heading h6 strong {
    1150     font-weight: 600;
    1151 }
    1152 
    1153 h6 strong {
    1154     font-weight: 600;
    1155 }
    1156 
     968    font-family: var(--heading--font-family);
     969    font-weight: var(--heading--font-weight);
     970}
     971
     972.wp-block-heading h1 strong,
     973h1 strong,
     974.h1 strong,
     975.wp-block-heading h2 strong,
     976h2 strong,
     977.h2 strong,
     978.wp-block-heading h3 strong,
     979h3 strong,
     980.h3 strong,
     981.wp-block-heading h4 strong,
     982h4 strong,
     983.h4 strong,
     984.wp-block-heading h5 strong,
     985h5 strong,
     986.h5 strong,
     987.wp-block-heading h6 strong,
     988h6 strong,
    1157989.h6 strong {
    1158     font-weight: 600;
    1159 }
    1160 
    1161 .wp-block-heading h1[style*="--wp--typography--line-height"] {
    1162     line-height: --global--line-height-body;
    1163 }
    1164 
    1165 h1[style*="--wp--typography--line-height"] {
    1166     line-height: --global--line-height-body;
    1167 }
    1168 
    1169 .h1[style*="--wp--typography--line-height"] {
    1170     line-height: --global--line-height-body;
    1171 }
    1172 
    1173 .wp-block-heading h2[style*="--wp--typography--line-height"] {
    1174     line-height: --global--line-height-body;
    1175 }
    1176 
    1177 h2[style*="--wp--typography--line-height"] {
    1178     line-height: --global--line-height-body;
    1179 }
    1180 
    1181 .h2[style*="--wp--typography--line-height"] {
    1182     line-height: --global--line-height-body;
    1183 }
    1184 
    1185 .wp-block-heading h3[style*="--wp--typography--line-height"] {
    1186     line-height: --global--line-height-body;
    1187 }
    1188 
    1189 h3[style*="--wp--typography--line-height"] {
    1190     line-height: --global--line-height-body;
    1191 }
    1192 
    1193 .h3[style*="--wp--typography--line-height"] {
    1194     line-height: --global--line-height-body;
    1195 }
    1196 
    1197 .wp-block-heading h4[style*="--wp--typography--line-height"] {
    1198     line-height: --global--line-height-body;
    1199 }
    1200 
    1201 h4[style*="--wp--typography--line-height"] {
    1202     line-height: --global--line-height-body;
    1203 }
    1204 
    1205 .h4[style*="--wp--typography--line-height"] {
    1206     line-height: --global--line-height-body;
    1207 }
    1208 
    1209 .wp-block-heading h5[style*="--wp--typography--line-height"] {
    1210     line-height: --global--line-height-body;
    1211 }
    1212 
    1213 h5[style*="--wp--typography--line-height"] {
    1214     line-height: --global--line-height-body;
    1215 }
    1216 
    1217 .h5[style*="--wp--typography--line-height"] {
    1218     line-height: --global--line-height-body;
    1219 }
    1220 
    1221 .wp-block-heading h6[style*="--wp--typography--line-height"] {
    1222     line-height: --global--line-height-body;
    1223 }
    1224 
    1225 h6[style*="--wp--typography--line-height"] {
    1226     line-height: --global--line-height-body;
    1227 }
    1228 
     990    font-weight: var(--heading--font-weight-strong);
     991}
     992
     993.wp-block-heading h1[style*="--wp--typography--line-height"],
     994h1[style*="--wp--typography--line-height"],
     995.h1[style*="--wp--typography--line-height"],
     996.wp-block-heading h2[style*="--wp--typography--line-height"],
     997h2[style*="--wp--typography--line-height"],
     998.h2[style*="--wp--typography--line-height"],
     999.wp-block-heading h3[style*="--wp--typography--line-height"],
     1000h3[style*="--wp--typography--line-height"],
     1001.h3[style*="--wp--typography--line-height"],
     1002.wp-block-heading h4[style*="--wp--typography--line-height"],
     1003h4[style*="--wp--typography--line-height"],
     1004.h4[style*="--wp--typography--line-height"],
     1005.wp-block-heading h5[style*="--wp--typography--line-height"],
     1006h5[style*="--wp--typography--line-height"],
     1007.h5[style*="--wp--typography--line-height"],
     1008.wp-block-heading h6[style*="--wp--typography--line-height"],
     1009h6[style*="--wp--typography--line-height"],
    12291010.h6[style*="--wp--typography--line-height"] {
    1230     line-height: --global--line-height-body;
    1231 }
    1232 
    1233 .wp-block-heading h1 {
    1234     font-size: 4rem;
    1235     letter-spacing: normal;
    1236     line-height: 1.1;
    1237 }
    1238 
    1239 @media only screen and (min-width: 652px) {
    1240 
    1241     .wp-block-heading h1 {
    1242         font-size: 6rem;
    1243     }
    1244 }
    1245 
    1246 h1 {
    1247     font-size: 4rem;
    1248     letter-spacing: normal;
    1249     line-height: 1.1;
    1250 }
    1251 
    1252 @media only screen and (min-width: 652px) {
    1253 
    1254     h1 {
    1255         font-size: 6rem;
    1256     }
    1257 }
    1258 
     1011    line-height: var(--wp--typography--line-height, --global--line-height-body);
     1012}
     1013
     1014.wp-block-heading h1,
     1015h1,
    12591016.h1 {
    1260     font-size: 4rem;
    1261     letter-spacing: normal;
    1262     line-height: 1.1;
    1263 }
    1264 
    1265 @media only screen and (min-width: 652px) {
    1266 
    1267     .h1 {
    1268         font-size: 6rem;
    1269     }
    1270 }
    1271 
    1272 .wp-block-heading h2 {
    1273     font-size: 2.25rem;
    1274     letter-spacing: normal;
    1275     line-height: 1.3;
    1276 }
    1277 
    1278 @media only screen and (min-width: 652px) {
    1279 
    1280     .wp-block-heading h2 {
    1281         font-size: 3rem;
    1282     }
    1283 }
    1284 
    1285 @media only screen and (min-width: 652px) {
    1286 
    1287     .wp-block-heading h2 {
    1288         font-size: 3rem;
    1289     }
    1290 }
    1291 
    1292 h2 {
    1293     font-size: 2.25rem;
    1294     letter-spacing: normal;
    1295     line-height: 1.3;
    1296 }
    1297 
    1298 @media only screen and (min-width: 652px) {
    1299 
    1300     h2 {
    1301         font-size: 3rem;
    1302     }
    1303 }
    1304 
    1305 @media only screen and (min-width: 652px) {
    1306 
    1307     h2 {
    1308         font-size: 3rem;
    1309     }
    1310 }
    1311 
     1017    font-size: var(--heading--font-size-h1);
     1018    letter-spacing: var(--heading--letter-spacing-h1);
     1019    line-height: var(--heading--line-height-h1);
     1020}
     1021
     1022.wp-block-heading h2,
     1023h2,
    13121024.h2 {
    1313     font-size: 2.25rem;
    1314     letter-spacing: normal;
    1315     line-height: 1.3;
    1316 }
    1317 
    1318 @media only screen and (min-width: 652px) {
    1319 
    1320     .h2 {
    1321         font-size: 3rem;
    1322     }
    1323 }
    1324 
    1325 @media only screen and (min-width: 652px) {
    1326 
    1327     .h2 {
    1328         font-size: 3rem;
    1329     }
    1330 }
    1331 
    1332 .wp-block-heading h3 {
    1333     font-size: 2rem;
    1334     letter-spacing: normal;
    1335     line-height: 1.3;
    1336 }
    1337 
    1338 @media only screen and (min-width: 652px) {
    1339 
    1340     .wp-block-heading h3 {
    1341         font-size: 2rem;
    1342     }
    1343 }
    1344 
    1345 h3 {
    1346     font-size: 2rem;
    1347     letter-spacing: normal;
    1348     line-height: 1.3;
    1349 }
    1350 
    1351 @media only screen and (min-width: 652px) {
    1352 
    1353     h3 {
    1354         font-size: 2rem;
    1355     }
    1356 }
    1357 
     1025    font-size: var(--heading--font-size-h2);
     1026    letter-spacing: var(--heading--letter-spacing-h2);
     1027    line-height: var(--heading--line-height-h2);
     1028}
     1029
     1030.wp-block-heading h3,
     1031h3,
    13581032.h3 {
    1359     font-size: 2rem;
    1360     letter-spacing: normal;
    1361     line-height: 1.3;
    1362 }
    1363 
    1364 @media only screen and (min-width: 652px) {
    1365 
    1366     .h3 {
    1367         font-size: 2rem;
    1368     }
    1369 }
    1370 
    1371 .wp-block-heading h4 {
    1372     font-size: 1.5rem;
    1373     font-weight: 600;
    1374     letter-spacing: normal;
    1375     line-height: 1.3;
    1376 }
    1377 
    1378 h4 {
    1379     font-size: 1.5rem;
    1380     font-weight: 600;
    1381     letter-spacing: normal;
    1382     line-height: 1.3;
    1383 }
    1384 
     1033    font-size: var(--heading--font-size-h3);
     1034    letter-spacing: var(--heading--letter-spacing-h3);
     1035    line-height: var(--heading--line-height-h3);
     1036}
     1037
     1038.wp-block-heading h4,
     1039h4,
    13851040.h4 {
    1386     font-size: 1.5rem;
    1387     font-weight: 600;
    1388     letter-spacing: normal;
    1389     line-height: 1.3;
    1390 }
    1391 
    1392 .wp-block-heading h5 {
    1393     font-size: 1.125rem;
    1394     font-weight: 600;
    1395     letter-spacing: 0.05em;
    1396     line-height: 1.3;
    1397 }
    1398 
    1399 h5 {
    1400     font-size: 1.125rem;
    1401     font-weight: 600;
    1402     letter-spacing: 0.05em;
    1403     line-height: 1.3;
    1404 }
    1405 
     1041    font-size: var(--heading--font-size-h4);
     1042    font-weight: var(--heading--font-weight-strong);
     1043    letter-spacing: var(--heading--letter-spacing-h4);
     1044    line-height: var(--heading--line-height-h4);
     1045}
     1046
     1047.wp-block-heading h5,
     1048h5,
    14061049.h5 {
    1407     font-size: 1.125rem;
    1408     font-weight: 600;
    1409     letter-spacing: 0.05em;
    1410     line-height: 1.3;
    1411 }
    1412 
    1413 .wp-block-heading h6 {
    1414     font-size: 1rem;
    1415     font-weight: 600;
    1416     letter-spacing: 0.05em;
    1417     line-height: 1.3;
    1418 }
    1419 
    1420 h6 {
    1421     font-size: 1rem;
    1422     font-weight: 600;
    1423     letter-spacing: 0.05em;
    1424     line-height: 1.3;
    1425 }
    1426 
     1050    font-size: var(--heading--font-size-h5);
     1051    font-weight: var(--heading--font-weight-strong);
     1052    letter-spacing: var(--heading--letter-spacing-h5);
     1053    line-height: var(--heading--line-height-h5);
     1054}
     1055
     1056.wp-block-heading h6,
     1057h6,
    14271058.h6 {
    1428     font-size: 1rem;
    1429     font-weight: 600;
    1430     letter-spacing: 0.05em;
    1431     line-height: 1.3;
     1059    font-size: var(--heading--font-size-h6);
     1060    font-weight: var(--heading--font-weight-strong);
     1061    letter-spacing: var(--heading--letter-spacing-h6);
     1062    line-height: var(--heading--line-height-h6);
    14321063}
    14331064
    14341065[data-type="core/html"] textarea {
    1435     color: #28303d;
     1066    color: var(--global--color-dark-gray);
    14361067    border-radius: 0;
    1437     padding: 20px;
     1068    padding: var(--global--spacing-unit);
    14381069}
    14391070
    … …  
    14481079
    14491080/* Block Styles */
    1450 .wp-block-image.is-style-twentytwentyone-border img {
    1451     border: 3px solid #28303d;
    1452 }
    1453 
     1081.wp-block-image.is-style-twentytwentyone-border img,
    14541082.wp-block-image.is-style-twentytwentyone-image-frame img {
    1455     border: 3px solid #28303d;
     1083    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    14561084}
    14571085
    14581086.wp-block-image.is-style-twentytwentyone-image-frame img {
    1459     padding: 20px;
     1087    padding: var(--global--spacing-unit);
    14601088}
    14611089
    … …  
    14691097
    14701098.wp-block-latest-posts:not(.is-grid) > li {
    1471     margin-top: 50px;
    1472     margin-bottom: 50px;
     1099    margin-top: calc(1.666 * var(--global--spacing-vertical));
     1100    margin-bottom: calc(1.666 * var(--global--spacing-vertical));
    14731101}
    14741102
    … …  
    14871115
    14881116.wp-block-latest-posts.is-grid > li {
    1489     margin-bottom: 30px;
     1117    margin-bottom: var(--global--spacing-vertical);
    14901118}
    14911119
    … …  
    14951123
    14961124.wp-block-latest-posts > li > * {
    1497     margin-top: 10px;
    1498     margin-bottom: 10px;
     1125    margin-top: calc(0.333 * var(--global--spacing-vertical));
     1126    margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    14991127}
    15001128
    … …  
    15091137.wp-block-latest-posts > li > a {
    15101138    display: inline-block;
    1511     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1512     font-size: 2rem;
    1513     font-weight: normal;
    1514     line-height: 1.3;
    1515     margin-bottom: 10px;
    1516 }
    1517 @media only screen and (min-width: 652px) {
    1518 
    1519     .wp-block-latest-posts > li > a {
    1520         font-size: 2rem;
    1521     }
     1139    font-family: var(--latest-posts--title-font-family);
     1140    font-size: var(--latest-posts--title-font-size);
     1141    font-weight: var(--heading--font-weight);
     1142    line-height: var(--global--line-height-heading);
     1143    margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    15221144}
    15231145
    15241146.wp-block-latest-posts .wp-block-latest-posts__post-author {
    1525     color: #28303d;
    1526     font-size: 1.25rem;
    1527     line-height: 1.7;
     1147    color: var(--global--color-primary);
     1148    font-size: var(--global--font-size-md);
     1149    line-height: var(--global--line-height-body);
    15281150}
    15291151
    15301152.wp-block-latest-posts .wp-block-latest-posts__post-date {
    1531     color: #28303d;
    1532     font-size: 1rem;
    1533     line-height: 1.7;
     1153    color: var(--global--color-primary);
     1154    font-size: var(--global--font-size-xs);
     1155    line-height: var(--global--line-height-body);
    15341156}
    15351157
    … …  
    15391161}
    15401162
    1541 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
    1542     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1543     font-size: 1.125rem;
    1544     line-height: 1.7;
    1545     margin-top: 20px;
    1546 }
    1547 
     1163.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
    15481164.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
    1549     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1550     font-size: 1.125rem;
    1551     line-height: 1.7;
    1552     margin-top: 20px;
     1165    font-family: var(--latest-posts--description-font-family);
     1166    font-size: var(--latest-posts--description-font-size);
     1167    line-height: var(--global--line-height-body);
     1168    margin-top: calc(0.666 * var(--global--spacing-vertical));
    15531169}
    15541170
    15551171.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
    1556     border-top: 3px solid #28303d;
    1557     border-bottom: 3px solid #28303d;
    1558 }
    1559 
    1560 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
    1561     padding-bottom: 30px;
    1562     border-bottom: 1px solid #28303d;
    1563     margin-top: 30px;
    1564     margin-bottom: 30px;
    1565 }
    1566 
     1172    border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1173    border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1174}
     1175
     1176.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li,
    15671177.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
    1568     padding-bottom: 30px;
    1569     border-bottom: 1px solid #28303d;
    1570     margin-top: 30px;
    1571     margin-bottom: 30px;
     1178    padding-bottom: var(--global--spacing-vertical);
     1179    border-bottom: var(--separator--height) solid var(--global--color-border);
     1180    margin-top: var(--global--spacing-vertical);
     1181    margin-bottom: var(--global--spacing-vertical);
    15721182}
    15731183
    … …  
    15791189
    15801190.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
    1581     box-shadow: inset 0 -1px 0 0 #28303d;
    1582     border-bottom: 2px solid #28303d;
     1191    box-shadow: inset 0 -1px 0 0 var(--global--color-border);
     1192    border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
    15831193}
    15841194
    15851195.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
    15861196    margin: 0;
    1587     padding-top: 30px;
    1588     padding-right: 25px;
     1197    padding-top: var(--global--spacing-vertical);
     1198    padding-right: var(--global--spacing-horizontal);
    15891199}
    15901200
    15911201.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
    1592     padding-bottom: 30px;
     1202    padding-bottom: var(--global--spacing-vertical);
    15931203}
    15941204@media screen and (min-width: 600px) {
    15951205
    15961206    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
    1597         width: 50%;
     1207        width: calc((100% / 2));
    15981208    }
    15991209
    16001210    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
    1601         width: 33%;
     1211        width: calc((100% / 3));
    16021212    }
    16031213
    16041214    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
    1605         width: 25%;
     1215        width: calc((100% / 4));
    16061216    }
    16071217
    16081218    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
    1609         width: 20%;
     1219        width: calc((100% / 5));
    16101220    }
    16111221
    16121222    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
    1613         width: 17%;
     1223        width: calc((100% / 6));
    16141224    }
    16151225}
    16161226
    16171227.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
    1618     border: 3px solid #28303d;
    1619     padding: 30px 25px;
     1228    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1229    padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
    16201230}
    16211231
    16221232.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
    1623     padding-bottom: 30px;
    1624     margin-bottom: 30px;
     1233    padding-bottom: var(--global--spacing-vertical);
     1234    margin-bottom: var(--global--spacing-vertical);
    16251235}
    16261236
    16271237.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
    1628     margin-top: 25px;
    1629     margin-bottom: 25px;
     1238    margin-top: var(--global--spacing-horizontal);
     1239    margin-bottom: var(--global--spacing-horizontal);
    16301240}
    16311241
    … …  
    16731283}
    16741284
    1675 ul {
    1676     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1677     margin: 30px 0;
    1678     padding-left: 50px;
    1679 }
    1680 
     1285ul,
    16811286ol {
    1682     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1683     margin: 30px 0;
    1684     padding-left: 50px;
     1287    font-family: var(--list--font-family);
     1288    margin: var(--global--spacing-vertical) 0;
     1289    padding-left: calc(2 * var(--global--spacing-horizontal));
    16851290}
    16861291
    … …  
    17051310
    17061311dt {
    1707     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     1312    font-family: var(--definition-term--font-family);
    17081313    font-weight: bold;
    17091314}
    … …  
    17141319}
    17151320
     1321.wp-block-media-text > .wp-block-media-text__content > *:first-child {
     1322    margin-top: 0;
     1323}
     1324
     1325.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) {
     1326    margin-bottom: 0;
     1327}
     1328
     1329.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2),
     1330.wp-block-media-text.is-selected > .wp-block-media-text__content > *:nth-last-child(2) {
     1331    margin-bottom: 0;
     1332}
     1333
    17161334.wp-block-media-text .wp-block-media-text__content {
    1717     padding: 25px;
    1718 }
    1719 
    1720 .wp-block-media-text .wp-block-media-text__content [data-block]:first-child {
    1721     margin-top: 0;
    1722 }
    1723 
    1724 .wp-block-media-text .wp-block-media-text__content [data-block]:last-child {
    1725     margin-bottom: 0;
     1335    padding: var(--global--spacing-horizontal);
    17261336}
    17271337
    17281338.wp-block-media-text.is-style-twentytwentyone-border {
    1729     border: 3px solid #28303d;
     1339    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    17301340}
    17311341
    17321342.wp-block-navigation .wp-block-navigation__container {
    1733     background: #d1e4dd;
     1343    background: var(--global--color-background);
    17341344    padding: 0;
    17351345}
    17361346
    17371347.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
    1738     padding: 13px;
     1348    padding: var(--primary-nav--padding);
    17391349}
    17401350
    17411351.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
    1742     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1743     font-size: 1.25rem;
    1744     font-weight: normal;
     1352    font-family: var(--primary-nav--font-family);
     1353    font-size: var(--primary-nav--font-size);
     1354    font-weight: var(--primary-nav--font-weight);
    17451355}
    17461356
    17471357.wp-block-navigation .has-child .wp-block-navigation__container {
    1748     box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    1749 }
    1750 
    1751 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
    1752     color: #28303d;
    1753 }
    1754 
     1358    box-shadow: var(--global--elevation);
     1359}
     1360
     1361.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover,
    17551362.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
    1756     color: #28303d;
     1363    color: var(--primary-nav--color-link-hover);
    17571364}
    17581365
    … …  
    17621369
    17631370p {
    1764     line-height: --global--line-height-body;
     1371    line-height: var(--wp--typography--line-height, --global--line-height-body);
    17651372}
    17661373
    17671374p.has-background {
    1768     padding: 20px;
     1375    padding: var(--global--spacing-unit);
    17691376}
    17701377
    … …  
    17721379    overflow-x: auto;
    17731380    white-space: pre !important;
    1774     font-size: 1rem;
     1381    font-size: var(--global--font-size-xs);
    17751382}
    17761383
    17771384.wp-block-pullquote {
    1778     padding: 40px 0;
     1385    padding: calc(2 * var(--global--spacing-unit)) 0;
    17791386    text-align: center;
    1780     border-width: 3px;
     1387    border-width: var(--pullquote--border-width);
    17811388    border-bottom-style: solid;
    17821389    border-top-style: solid;
    … …  
    17901397    content: "“";
    17911398    display: block;
     1399    position: relative;
     1400    left: 0;
    17921401    font-size: 3rem;
    17931402    font-weight: 500;
    … …  
    17961405
    17971406.wp-block-pullquote p {
    1798     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1799     font-size: 2rem;
    1800     font-style: normal;
     1407    font-family: var(--pullquote--font-family);
     1408    font-size: var(--pullquote--font-size);
     1409    font-style: var(--pullquote--font-style);
    18011410    font-weight: 700;
    1802     letter-spacing: normal;
    1803     line-height: 1.3;
     1411    letter-spacing: var(--pullquote--letter-spacing);
     1412    line-height: var(--pullquote--line-height);
    18041413    margin: 0;
    1805 }
    1806 @media only screen and (min-width: 652px) {
    1807 
    1808     .wp-block-pullquote p {
    1809         font-size: 2rem;
    1810     }
    18111414}
    18121415
    … …  
    18151418}
    18161419
    1817 .wp-block-pullquote .wp-block-pullquote__citation {
    1818     font-size: 1rem;
    1819     font-style: normal;
    1820     text-transform: none;
    1821 }
    1822 
    1823 .wp-block-pullquote cite {
    1824     font-size: 1rem;
    1825     font-style: normal;
    1826     text-transform: none;
    1827 }
    1828 
     1420.wp-block-pullquote .wp-block-pullquote__citation,
     1421.wp-block-pullquote cite,
    18291422.wp-block-pullquote footer {
    1830     font-size: 1rem;
    1831     font-style: normal;
     1423    font-size: var(--global--font-size-xs);
     1424    font-style: var(--pullquote--font-style);
    18321425    text-transform: none;
    18331426}
    … …  
    18401433    margin-left: auto;
    18411434    margin-right: auto;
    1842     padding: 50px;
    1843     border-width: 3px;
     1435    padding: calc(2.5 * var(--global--spacing-unit));
     1436    border-width: var(--pullquote--border-width);
    18441437    border-style: solid;
    1845     border-color: #28303d;
     1438    border-color: var(--pullquote--border-color);
    18461439}
    18471440@media (min-width: 600px) {
    18481441
    18491442    .wp-block-pullquote.is-style-solid-color {
    1850         padding: 100px;
     1443        padding: calc(5 * var(--global--spacing-unit));
    18511444    }
    18521445}
    … …  
    18561449}
    18571450
    1858 .wp-block-pullquote.is-style-solid-color.alignleft blockquote {
    1859     padding-left: 20px;
    1860     padding-right: 20px;
    1861     max-width: inherit;
    1862 }
    1863 
     1451.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
    18641452.wp-block-pullquote.is-style-solid-color.alignright blockquote {
    1865     padding-left: 20px;
    1866     padding-right: 20px;
     1453    padding-left: var(--global--spacing-unit);
     1454    padding-right: var(--global--spacing-unit);
    18671455    max-width: inherit;
    18681456}
    … …  
    18741462
    18751463.wp-block-pullquote.is-style-solid-color blockquote p {
    1876     font-size: 2rem;
    1877 }
    1878 @media only screen and (min-width: 652px) {
    1879 
    1880     .wp-block-pullquote.is-style-solid-color blockquote p {
    1881         font-size: 2rem;
    1882     }
     1464    font-size: var(--pullquote--font-size);
    18831465}
    18841466
    … …  
    18901472
    18911473.wp-block[data-align=full] .wp-block-pullquote:not(.is-style-solid-color) blockquote {
    1892     padding: 0 40px;
     1474    padding: 0 calc(2 * var(--global--spacing-unit));
     1475}
     1476
     1477.wp-block[data-align=left] .wp-block-pullquote.is-style-solid-color,
     1478.wp-block[data-align=right] .wp-block-pullquote.is-style-solid-color {
     1479    padding: var(--global--spacing-unit);
    18931480}
    18941481
    … …  
    18961483    position: relative;
    18971484    border-left: none;
    1898     margin: 30px auto 30px 25px;
     1485    margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal);
    18991486}
    19001487
    19011488.wp-block-quote p {
    1902     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1903     font-size: 1.25rem;
    1904     font-style: normal;
    1905     font-weight: 700;
    1906     line-height: 1.7;
     1489    font-family: var(--quote--font-family);
     1490    font-size: var(--quote--font-size);
     1491    font-style: var(--quote--font-style);
     1492    font-weight: var(--quote--font-weight);
     1493    line-height: var(--quote--line-height);
    19071494}
    19081495
    19091496.wp-block-quote strong {
    1910     font-weight: bolder;
     1497    font-weight: var(--quote--font-weight-strong);
    19111498}
    19121499
    19131500.wp-block-quote:before {
    19141501    content: "“";
    1915     font-size: 1.25rem;
    1916     line-height: 1.7;
    1917     position: absolute;
    1918     left: -12px;
     1502    font-size: var(--quote--font-size);
     1503    line-height: var(--quote--line-height);
     1504    left: calc(-0.5 * var(--global--spacing-horizontal));
    19191505}
    19201506
    19211507.wp-block-quote .wp-block-quote__citation {
    1922     color: #28303d;
    1923     font-size: 1rem;
    1924     font-style: normal;
    1925 }
    1926 
    1927 .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    1928 [class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    1929 [style*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
     1508    color: var(--global--color-primary);
     1509    font-size: var(--global--font-size-xs);
     1510    font-style: var(--quote--font-style-cite);
     1511}
     1512
     1513.has-background .wp-block-quote .wp-block-quote__citation,
     1514[class*=background-color] .wp-block-quote .wp-block-quote__citation,
     1515[style*=background-color] .wp-block-quote .wp-block-quote__citation,
    19301516.wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation {
    19311517    color: currentColor;
    … …  
    19331519
    19341520.wp-block-quote.has-text-align-right {
    1935     margin: 30px 25px 30px auto;
     1521    margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
    19361522    padding-right: 0;
    19371523    border-right: none;
    … …  
    19391525
    19401526.wp-block-quote.has-text-align-right:before {
     1527    display: none;
     1528}
     1529
     1530.wp-block-quote.has-text-align-right p:before {
    19411531    content: "”";
    1942     left: initial;
    1943     right: -12px;
     1532    font-size: var(--quote--font-size);
     1533    font-weight: normal;
     1534    line-height: var(--quote--line-height);
     1535    margin-right: 5px;
    19441536}
    19451537
    19461538.wp-block-quote.has-text-align-center {
    1947     margin: 30px auto;
     1539    margin: var(--global--spacing-vertical) auto;
    19481540}
    19491541
    … …  
    19521544}
    19531545
    1954 .wp-block-quote.is-large {
    1955     padding-left: 0;
    1956 
    1957     /* Resetting margins to match _block-container.scss */
    1958     margin-top: 30px;
    1959     margin-bottom: 30px;
    1960 }
    1961 
     1546.wp-block-quote.is-large,
    19621547.wp-block-quote.is-style-large {
    19631548    padding-left: 0;
    19641549
    19651550    /* Resetting margins to match _block-container.scss */
    1966     margin-top: 30px;
    1967     margin-bottom: 30px;
    1968 }
    1969 
    1970 .wp-block-quote.is-large p {
    1971     font-size: 2.25rem;
    1972     font-style: normal;
    1973     line-height: 1.35;
    1974 }
    1975 @media only screen and (min-width: 652px) {
    1976 
    1977     .wp-block-quote.is-large p {
    1978         font-size: 2.5rem;
    1979     }
    1980 }
    1981 
     1551    margin-top: var(--global--spacing-vertical);
     1552    margin-bottom: var(--global--spacing-vertical);
     1553}
     1554
     1555.wp-block-quote.is-large p,
    19821556.wp-block-quote.is-style-large p {
    1983     font-size: 2.25rem;
    1984     font-style: normal;
    1985     line-height: 1.35;
    1986 }
    1987 @media only screen and (min-width: 652px) {
    1988 
    1989     .wp-block-quote.is-style-large p {
    1990         font-size: 2.5rem;
    1991     }
    1992 }
    1993 
    1994 .wp-block-quote.is-large:before {
    1995     font-size: 2.25rem;
    1996     line-height: 1.35;
    1997     left: -25px;
    1998 }
    1999 @media only screen and (min-width: 652px) {
    2000 
    2001     .wp-block-quote.is-large:before {
    2002         font-size: 2.5rem;
    2003     }
    2004 }
    2005 
     1557    font-size: var(--quote--font-size-large);
     1558    font-style: var(--quote--font-style-large);
     1559    line-height: var(--quote--line-height-large);
     1560}
     1561
     1562.wp-block-quote.is-large:before,
    20061563.wp-block-quote.is-style-large:before {
    2007     font-size: 2.25rem;
    2008     line-height: 1.35;
    2009     left: -25px;
    2010 }
    2011 @media only screen and (min-width: 652px) {
    2012 
    2013     .wp-block-quote.is-style-large:before {
    2014         font-size: 2.5rem;
    2015     }
    2016 }
    2017 
    2018 .wp-block-quote.is-large.has-text-align-right:before {
    2019     left: initial;
    2020     right: -25px;
    2021 }
    2022 
     1564    font-size: var(--quote--font-size-large);
     1565    line-height: var(--quote--line-height-large);
     1566    left: calc(-1 * var(--global--spacing-horizontal));
     1567}
     1568
     1569.wp-block-quote.is-large.has-text-align-right:before,
    20231570.wp-block-quote.is-style-large.has-text-align-right:before {
    2024     left: initial;
    2025     right: -25px;
     1571    display: none;
     1572}
     1573
     1574.wp-block-quote.is-large.has-text-align-right p:before,
     1575.wp-block-quote.is-style-large.has-text-align-right p:before {
     1576    content: "”";
     1577    font-size: var(--quote--font-size-large);
     1578    font-weight: normal;
     1579    line-height: var(--quote--line-height-large);
     1580    margin-right: 10px;
    20261581}
    20271582@media only screen and (max-width: 481px) {
    20281583
    2029     .wp-block-quote.is-large {
    2030         padding-left: 25px;
    2031     }
    2032 
     1584    .wp-block-quote.is-large,
    20331585    .wp-block-quote.is-style-large {
    2034         padding-left: 25px;
     1586        padding-left: var(--global--spacing-horizontal);
    20351587    }
    20361588
    … …  
    20401592    }
    20411593
    2042     .wp-block-quote.is-large.has-text-align-right {
    2043         padding-left: 0;
    2044         padding-right: 25px;
    2045     }
    2046 
     1594    .wp-block-quote.is-large.has-text-align-right,
    20471595    .wp-block-quote.is-style-large.has-text-align-right {
    20481596        padding-left: 0;
    2049         padding-right: 25px;
     1597        padding-right: var(--global--spacing-horizontal);
    20501598    }
    20511599
    … …  
    20581606
    20591607    .wp-block-quote {
    2060         padding-left: 13px;
     1608        padding-left: calc(0.5 * var(--global--spacing-horizontal));
    20611609    }
    20621610
    … …  
    20671615    .wp-block-quote.has-text-align-right {
    20681616        padding-left: 0;
    2069         padding-right: 13px;
     1617        padding-right: calc(0.5 * var(--global--spacing-horizontal));
    20701618    }
    20711619
    … …  
    20991647
    21001648.wp-block-rss:not(.is-grid) > li {
    2101     margin-top: 50px;
    2102     margin-bottom: 50px;
     1649    margin-top: calc(1.666 * var(--global--spacing-vertical));
     1650    margin-bottom: calc(1.666 * var(--global--spacing-vertical));
    21031651}
    21041652
    … …  
    21121660
    21131661.wp-block-rss.is-grid > li {
    2114     margin-bottom: 30px;
     1662    margin-bottom: var(--global--spacing-vertical);
    21151663}
    21161664
    … …  
    21331681
    21341682.wp-block-rss > li > * {
    2135     margin-top: 10px;
    2136     margin-bottom: 10px;
     1683    margin-top: calc(0.333 * var(--global--spacing-vertical));
     1684    margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    21371685}
    21381686
    … …  
    21471695.wp-block-rss .wp-block-rss__item-title > a {
    21481696    display: inline-block;
    2149     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2150     font-size: 2rem;
    2151     font-weight: normal;
    2152     line-height: 1.3;
    2153     margin-bottom: 10px;
    2154 }
    2155 @media only screen and (min-width: 652px) {
    2156 
    2157     .wp-block-rss .wp-block-rss__item-title > a {
    2158         font-size: 2rem;
    2159     }
     1697    font-family: var(--latest-posts--title-font-family);
     1698    font-size: var(--latest-posts--title-font-size);
     1699    font-weight: var(--heading--font-weight);
     1700    line-height: var(--global--line-height-heading);
     1701    margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    21601702}
    21611703
    21621704.wp-block-rss .wp-block-rss__item-author {
    2163     color: #28303d;
    2164     font-size: 1.25rem;
    2165     line-height: 1.7;
     1705    color: var(--global--color-primary);
     1706    font-size: var(--global--font-size-md);
     1707    line-height: var(--global--line-height-body);
    21661708}
    21671709
    21681710.wp-block-rss .wp-block-rss__item-publish-date {
    2169     color: #28303d;
    2170     font-size: 1rem;
    2171     line-height: 1.7;
     1711    color: var(--global--color-primary);
     1712    font-size: var(--global--font-size-xs);
     1713    line-height: var(--global--line-height-body);
    21721714}
    21731715
    … …  
    21771719}
    21781720
    2179 .wp-block-rss .wp-block-rss__item-excerpt {
    2180     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2181     font-size: 1.125rem;
    2182     line-height: 1.7;
    2183     margin-top: 20px;
    2184 }
    2185 
     1721.wp-block-rss .wp-block-rss__item-excerpt,
    21861722.wp-block-rss .wp-block-rss__item-full-content {
    2187     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2188     font-size: 1.125rem;
    2189     line-height: 1.7;
    2190     margin-top: 20px;
     1723    font-family: var(--latest-posts--description-font-family);
     1724    font-size: var(--latest-posts--description-font-size);
     1725    line-height: var(--global--line-height-body);
     1726    margin-top: calc(0.666 * var(--global--spacing-vertical));
    21911727}
    21921728
    21931729.wp-block-rss.alignfull {
    2194     padding-left: 20px;
    2195     padding-right: 20px;
     1730    padding-left: var(--global--spacing-unit);
     1731    padding-right: var(--global--spacing-unit);
    21961732}
    21971733
    … …  
    22031739
    22041740.wp-block-search {
    2205     max-width: calc(100vw - 30px);
    2206 }
    2207 
    2208 @media only screen and (min-width: 482px) {
    2209 
    2210     .wp-block-search {
    2211         max-width: min(calc(100vw - 100px), 610px);
    2212     }
    2213 }
    2214 
    2215 @media only screen and (min-width: 822px) {
    2216 
    2217     .wp-block-search {
    2218         max-width: min(calc(100vw - 200px), 610px);
    2219     }
     1741    max-width: var(--responsive--aligndefault-width);
    22201742}
    22211743
    22221744.wp-block-search .wp-block-search__label {
    2223     font-size: 1.125rem;
    2224     font-weight: 500;
    2225     margin-bottom: 10px;
     1745    font-size: var(--form--font-size);
     1746    font-weight: var(--form--label-weight);
     1747    margin-bottom: calc(var(--global--spacing-vertical) / 3);
    22261748}
    22271749
    22281750.wp-block-search .wp-block-search__input {
    2229     border: 3px solid #39414d;
    2230     border-radius: 0;
    2231     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2232     font-size: 1.125rem;
    2233     line-height: 1.7;
     1751    border: var(--form--border-width) solid var(--form--border-color);
     1752    border-radius: var(--form--border-radius);
     1753    font-family: var(--form--font-family);
     1754    font-size: var(--form--font-size);
     1755    line-height: var(--form--line-height);
    22341756    max-width: inherit;
    2235     margin-right: -3px;
    2236     padding: 10px;
     1757    margin-right: calc(-1 * var(--button--border-width));
     1758    padding: var(--form--spacing-unit);
    22371759}
    22381760
    22391761.is-dark-theme .wp-block-search .wp-block-search__input {
    2240     background: rgba(255, 255, 255, 0.9);
    2241 }
    2242 
    2243 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input {
    2244     border-color: #28303d;
    2245 }
    2246 
    2247 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input {
    2248     border-color: #28303d;
    2249 }
    2250 
    2251 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input {
    2252     border-color: #28303d;
    2253 }
    2254 
    2255 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input {
    2256     border-color: #28303d;
    2257 }
    2258 
    2259 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input {
    2260     border-color: #28303d;
    2261 }
    2262 
    2263 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input {
    2264     border-color: #28303d;
    2265 }
    2266 
     1762    background: var(--global--color-white-90);
     1763}
     1764
     1765.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input,
     1766.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input,
     1767.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input,
     1768.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input,
     1769.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input,
     1770.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input,
    22671771.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
    2268     border-color: #28303d;
    2269 }
    2270 
    2271 .has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
    2272     border-color: #fff;
    2273 }
    2274 
    2275 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
    2276     border-color: #fff;
    2277 }
    2278 
     1772    border-color: var(--form--color-text);
     1773}
     1774
     1775.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
     1776.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
    22791777.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
    2280     border-color: #fff;
     1778    border-color: var(--global--color-white);
    22811779}
    22821780
    22831781.wp-block-search .wp-block-search__button {
    2284     line-height: 1.5;
    2285     color: #d1e4dd;
     1782    line-height: var(--button--line-height);
     1783    color: var(--button--color-text);
    22861784    cursor: pointer;
    2287     font-weight: 500;
    2288     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2289     font-size: 1.25rem;
    2290     background-color: #39414d;
    2291     border-radius: 0;
    2292     border: 3px solid #39414d;
     1785    font-weight: var(--button--font-weight);
     1786    font-family: var(--button--font-family);
     1787    font-size: var(--button--font-size);
     1788    background-color: var(--button--color-background);
     1789    border-radius: var(--button--border-radius);
     1790    border: var(--button--border-width) solid var(--button--color-background);
    22931791    text-decoration: none;
    2294     padding: 15px 30px;
     1792    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    22951793    box-shadow: none;
    22961794    margin-left: 0;
    22971795    background-color: transparent;
    2298     color: #39414d;
    2299 }
    2300 
    2301 .wp-block-search .wp-block-search__button:before,
    2302 .wp-block-search .wp-block-search__button:after {
    2303     content: "";
    2304     display: block;
    2305     height: 0;
    2306     width: 0;
    2307 }
    2308 
    2309 .wp-block-search .wp-block-search__button:before {
    2310     margin-bottom: -calc(1em - 0);
    2311 }
    2312 
    2313 .wp-block-search .wp-block-search__button:after {
    2314     margin-top: -calc(1em - 0);
     1796    color: var(--button--color-text-hover);
    23151797}
    23161798
    … …  
    23221804
    23231805.is-dark-theme .wp-block-search .wp-block-search__button:focus {
    2324     color: #39414d;
     1806    color: var(--button--color-background);
    23251807}
    23261808
    23271809.wp-block-search .wp-block-search__button:focus:not(.has-background) {
    2328     color: #39414d;
     1810    color: var(--button--color-text-hover);
    23291811}
    23301812
    23311813.wp-block-search .wp-block-search__button:disabled {
    2332     background-color: rgba(255, 255, 255, 0.5);
    2333     border-color: rgba(255, 255, 255, 0.5);
    2334     color: #39414d;
     1814    background-color: var(--global--color-white-50);
     1815    border-color: var(--global--color-white-50);
     1816    color: var(--button--color-text-active);
    23351817}
    23361818
    23371819.wp-block-search .wp-block-search__button:hover {
    2338     color: #d1e4dd;
    2339     background-color: #39414d;
     1820    color: var(--button--color-text);
     1821    background-color: var(--button--color-background);
    23401822}
    23411823
    23421824.wp-block-search .wp-block-search__button.has-icon {
    2343     padding: 30px 15px;
     1825    padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
    23441826}
    23451827
    … …  
    23491831}
    23501832
    2351 .has-background.has-gray-background-color .wp-block-search .wp-block-search__button {
    2352     color: #fff;
     1833.has-background.has-gray-background-color .wp-block-search .wp-block-search__button,
     1834.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button,
     1835.has-background.has-black-background-color .wp-block-search .wp-block-search__button {
     1836    color: var(--global--color-white);
    23531837    border-color: currentColor;
    23541838}
    23551839
    2356 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button {
    2357     color: #fff;
     1840.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1841.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1842.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
     1843    color: var(--global--color-white);
     1844    background-color: var(--button--color-background);
     1845    border-color: var(--global--color-white);
     1846}
     1847
     1848.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1849.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1850.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
     1851    color: var(--button--color-text);
     1852    background-color: var(--button--color-background);
     1853}
     1854
     1855.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
     1856.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
     1857.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
     1858.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
     1859.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
     1860.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
     1861.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
     1862    color: var(--global--color-white);
     1863    background-color: var(--form--border-color);
     1864    border-color: var(--form--border-color);
     1865}
     1866
     1867.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button,
     1868.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button,
     1869.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button,
     1870.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button,
     1871.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button,
     1872.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button,
     1873.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
     1874    color: var(--form--color-text);
    23581875    border-color: currentColor;
    23591876}
    23601877
    2361 .has-background.has-black-background-color .wp-block-search .wp-block-search__button {
    2362     color: #fff;
    2363     border-color: currentColor;
    2364 }
    2365 
    2366 .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2367     color: #fff;
    2368     background-color: #39414d;
    2369     border-color: #fff;
    2370 }
    2371 
    2372 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2373     color: #fff;
    2374     background-color: #39414d;
    2375     border-color: #fff;
    2376 }
    2377 
    2378 .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
    2379     color: #fff;
    2380     background-color: #39414d;
    2381     border-color: #fff;
    2382 }
    2383 
    2384 .is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2385     color: #d1e4dd;
    2386     background-color: #39414d;
    2387 }
    2388 
    2389 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2390     color: #d1e4dd;
    2391     background-color: #39414d;
    2392 }
    2393 
    2394 .is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
    2395     color: #d1e4dd;
    2396     background-color: #39414d;
    2397 }
    2398 
    2399 .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
    2400     color: #fff;
    2401     background-color: #39414d;
    2402     border-color: #39414d;
    2403 }
    2404 
    2405 .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
    2406     color: #fff;
    2407     background-color: #39414d;
    2408     border-color: #39414d;
    2409 }
    2410 
    2411 .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
    2412     color: #fff;
    2413     background-color: #39414d;
    2414     border-color: #39414d;
    2415 }
    2416 
    2417 .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
    2418     color: #fff;
    2419     background-color: #39414d;
    2420     border-color: #39414d;
    2421 }
    2422 
    2423 .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
    2424     color: #fff;
    2425     background-color: #39414d;
    2426     border-color: #39414d;
    2427 }
    2428 
    2429 .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
    2430     color: #fff;
    2431     background-color: #39414d;
    2432     border-color: #39414d;
    2433 }
    2434 
    2435 .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
    2436     color: #fff;
    2437     background-color: #39414d;
    2438     border-color: #39414d;
    2439 }
    2440 
    2441 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button {
    2442     color: #28303d;
    2443     border-color: currentColor;
    2444 }
    2445 
    2446 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button {
    2447     color: #28303d;
    2448     border-color: currentColor;
    2449 }
    2450 
    2451 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button {
    2452     color: #28303d;
    2453     border-color: currentColor;
    2454 }
    2455 
    2456 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button {
    2457     color: #28303d;
    2458     border-color: currentColor;
    2459 }
    2460 
    2461 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button {
    2462     color: #28303d;
    2463     border-color: currentColor;
    2464 }
    2465 
    2466 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button {
    2467     color: #28303d;
    2468     border-color: currentColor;
    2469 }
    2470 
    2471 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
    2472     color: #28303d;
    2473     border-color: currentColor;
    2474 }
    2475 
    2476 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
    2477     color: #fff;
    2478     background-color: #d1e4dd;
    2479     border-color: #d1e4dd;
    2480 }
    2481 
    2482 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
    2483     color: #fff;
    2484     background-color: #d1e4dd;
    2485     border-color: #d1e4dd;
    2486 }
    2487 
    2488 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
    2489     color: #fff;
    2490     background-color: #d1e4dd;
    2491     border-color: #d1e4dd;
    2492 }
    2493 
    2494 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
    2495     color: #fff;
    2496     background-color: #d1e4dd;
    2497     border-color: #d1e4dd;
    2498 }
    2499 
    2500 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
    2501     color: #fff;
    2502     background-color: #d1e4dd;
    2503     border-color: #d1e4dd;
    2504 }
    2505 
    2506 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
    2507     color: #fff;
    2508     background-color: #d1e4dd;
    2509     border-color: #d1e4dd;
    2510 }
    2511 
     1878.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
     1879.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
     1880.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
     1881.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
     1882.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
     1883.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
    25121884.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
    2513     color: #fff;
    2514     background-color: #d1e4dd;
    2515     border-color: #d1e4dd;
     1885    color: var(--global--color-white);
     1886    background-color: var(--button--color-text);
     1887    border-color: var(--button--color-text);
    25161888}
    25171889
    … …  
    25281900
    25291901.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
    2530     padding: 15px 30px;
     1902    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    25311903}
    25321904
    25331905.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2534     color: #d1e4dd;
     1906    color: var(--button--color-text);
    25351907    border-color: currentColor;
    25361908}
    25371909
    25381910.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2539     color: #fff;
    2540     background-color: #d1e4dd;
    2541     border-color: #d1e4dd;
    2542 }
    2543 
    2544 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2545     color: #39414d;
     1911    color: var(--global--color-white);
     1912    background-color: var(--button--color-text);
     1913    border-color: var(--button--color-text);
     1914}
     1915
     1916.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1917.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1918.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
     1919    color: var(--button--color-text-hover);
    25461920    border-color: currentColor;
    25471921}
    25481922
    2549 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2550     color: #39414d;
     1923.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1924.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1925.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
     1926    color: var(--global--color-white);
     1927    background-color: var(--button--color-background);
     1928    border-color: var(--button--color-background);
     1929}
     1930
     1931.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1932.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1933.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
     1934    color: var(--button--color-text);
    25511935    border-color: currentColor;
    25521936}
    25531937
    2554 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2555     color: #39414d;
    2556     border-color: currentColor;
    2557 }
    2558 
    2559 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2560     color: #fff;
    2561     background-color: #39414d;
    2562     border-color: #39414d;
    2563 }
    2564 
    2565 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2566     color: #fff;
    2567     background-color: #39414d;
    2568     border-color: #39414d;
    2569 }
    2570 
    2571 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2572     color: #fff;
    2573     background-color: #39414d;
    2574     border-color: #39414d;
    2575 }
    2576 
    2577 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2578     color: #d1e4dd;
    2579     border-color: currentColor;
    2580 }
    2581 
    2582 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2583     color: #d1e4dd;
    2584     border-color: currentColor;
    2585 }
    2586 
    2587 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2588     color: #d1e4dd;
    2589     border-color: currentColor;
    2590 }
    2591 
    2592 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2593     color: #fff;
    2594     background-color: #d1e4dd;
    2595     border-color: #d1e4dd;
    2596 }
    2597 
    2598 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2599     color: #fff;
    2600     background-color: #d1e4dd;
    2601     border-color: #d1e4dd;
    2602 }
    2603 
     1938.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1939.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
    26041940.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2605     color: #fff;
    2606     background-color: #d1e4dd;
    2607     border-color: #d1e4dd;
     1941    color: var(--global--color-white);
     1942    background-color: var(--button--color-text);
     1943    border-color: var(--button--color-text);
    26081944}
    26091945
    … …  
    26161952}
    26171953
    2618 .wp-block-separator {
    2619     border-bottom: 1px solid #28303d;
     1954.wp-block-separator,
     1955hr {
     1956    border-bottom: var(--separator--height) solid var(--separator--border-color);
    26201957    clear: both;
    26211958    opacity: 1;
    26221959}
    26231960
    2624 hr {
    2625     border-bottom: 1px solid #28303d;
    2626     clear: both;
    2627     opacity: 1;
    2628 }
    2629 
    2630 .wp-block-separator[style*="text-align:right"] {
    2631     border-right-color: #28303d;
    2632 }
    2633 
    2634 .wp-block-separator[style*="text-align: right"] {
    2635     border-right-color: #28303d;
    2636 }
    2637 
    2638 hr[style*="text-align:right"] {
    2639     border-right-color: #28303d;
    2640 }
    2641 
     1961.wp-block-separator[style*="text-align:right"],
     1962.wp-block-separator[style*="text-align: right"],
     1963hr[style*="text-align:right"],
    26421964hr[style*="text-align: right"] {
    2643     border-right-color: #28303d;
    2644 }
    2645 
    2646 .wp-block-separator:not(.is-style-dots) {
    2647     max-width: calc(100vw - 30px);
    2648 }
    2649 @media only screen and (min-width: 482px) {
    2650 
    2651     .wp-block-separator:not(.is-style-dots) {
    2652         max-width: min(calc(100vw - 100px), 610px);
    2653     }
    2654 }
    2655 @media only screen and (min-width: 822px) {
    2656 
    2657     .wp-block-separator:not(.is-style-dots) {
    2658         max-width: min(calc(100vw - 200px), 610px);
    2659     }
    2660 }
    2661 
     1965    border-right-color: var(--separator--border-color);
     1966}
     1967
     1968.wp-block-separator:not(.is-style-dots),
    26621969hr:not(.is-style-dots) {
    2663     max-width: calc(100vw - 30px);
    2664 }
    2665 @media only screen and (min-width: 482px) {
    2666 
    2667     hr:not(.is-style-dots) {
    2668         max-width: min(calc(100vw - 100px), 610px);
    2669     }
    2670 }
    2671 @media only screen and (min-width: 822px) {
    2672 
    2673     hr:not(.is-style-dots) {
    2674         max-width: min(calc(100vw - 200px), 610px);
    2675     }
     1970    max-width: var(--responsive--aligndefault-width);
    26761971}
    26771972
    … …  
    26831978}
    26841979
    2685 .wp-block-separator.is-style-twentytwentyone-separator-thick {
    2686     border-bottom-width: 3px;
    2687 }
    2688 
     1980.wp-block-separator.is-style-twentytwentyone-separator-thick,
    26891981hr.is-style-twentytwentyone-separator-thick {
    2690     border-bottom-width: 3px;
     1982    border-bottom-width: calc(3 * var(--separator--height));
    26911983}
    26921984
    … …  
    27102002}
    27112003
    2712 .wp-block-separator.is-style-dots:before {
    2713     color: #28303d;
    2714 }
    2715 
     2004.wp-block-separator.is-style-dots:before,
    27162005hr.is-style-dots:before {
    2717     color: #28303d;
    2718 }
    2719 
    2720 .has-background:not(.has-background-background-color) .wp-block-separator,
    2721 [class*=background-color]:not(.has-background-background-color) .wp-block-separator,
    2722 [style*=background-color]:not(.has-background-background-color) .wp-block-separator,
     2006    color: var(--separator--border-color);
     2007}
     2008
     2009.has-background .wp-block-separator,
     2010[class*=background-color] .wp-block-separator,
     2011[style*=background-color] .wp-block-separator,
    27232012.wp-block-cover[style*=background-image] .wp-block-separator,
    2724 .has-background:not(.has-background-background-color) hr,
    2725 [class*=background-color]:not(.has-background-background-color) hr,
    2726 [style*=background-color]:not(.has-background-background-color) hr,
     2013.has-background hr,
     2014[class*=background-color] hr,
     2015[style*=background-color] hr,
    27272016.wp-block-cover[style*=background-image] hr {
    27282017    border-color: currentColor;
    … …  
    27352024
    27362025.wp-block-social-links.is-style-twentytwentyone-social-icons-color button {
    2737     color: #28303d;
     2026    color: var(--global--color-primary);
    27382027}
    27392028
    … …  
    27422031}
    27432032
    2744 table th {
    2745     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2746 }
    2747 
     2033table th,
    27482034.wp-block-table th {
    2749     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2750 }
    2751 
    2752 table td {
    2753     padding: 10px;
    2754 }
    2755 
    2756 table th {
    2757     padding: 10px;
    2758 }
    2759 
    2760 .wp-block-table td {
    2761     padding: 10px;
    2762 }
    2763 
     2035    font-family: var(--heading--font-family);
     2036}
     2037
     2038table td,
     2039table th,
     2040.wp-block-table td,
    27642041.wp-block-table th {
    2765     padding: 10px;
    2766 }
    2767 
    2768 table.is-style-regular .has-background {
    2769     color: #28303d;
    2770 }
    2771 
    2772 table.is-style-stripes .has-background thead tr {
    2773     color: #28303d;
    2774 }
    2775 
    2776 table.is-style-stripes .has-background tfoot tr {
    2777     color: #28303d;
    2778 }
    2779 
    2780 table.is-style-stripes .has-background tbody tr:nth-child(even) {
    2781     color: #28303d;
    2782 }
    2783 
    2784 .wp-block-table.is-style-regular .has-background {
    2785     color: #28303d;
    2786 }
    2787 
    2788 .wp-block-table.is-style-stripes .has-background thead tr {
    2789     color: #28303d;
    2790 }
    2791 
    2792 .wp-block-table.is-style-stripes .has-background tfoot tr {
    2793     color: #28303d;
    2794 }
    2795 
     2042    padding: calc(0.5 * var(--global--spacing-unit));
     2043}
     2044
     2045table.is-style-regular .has-background,
     2046table.is-style-stripes .has-background thead tr,
     2047table.is-style-stripes .has-background tfoot tr,
     2048table.is-style-stripes .has-background tbody tr:nth-child(even),
     2049.wp-block-table.is-style-regular .has-background,
     2050.wp-block-table.is-style-stripes .has-background thead tr,
     2051.wp-block-table.is-style-stripes .has-background tfoot tr,
    27962052.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
    2797     color: #28303d;
    2798 }
    2799 
    2800 table.is-style-stripes {
    2801     border-color: #f0f0f0;
    2802 }
    2803 
     2053    color: var(--table--has-background-text-color);
     2054}
     2055
     2056table.is-style-stripes,
    28042057.wp-block-table.is-style-stripes {
    2805     border-color: #f0f0f0;
     2058    border-color: var(--table--stripes-border-color);
    28062059}
    28072060
    … …  
    28132066}
    28142067
    2815 table.is-style-stripes tbody tr:nth-child(odd) {
    2816     background-color: #f0f0f0;
    2817 }
    2818 
     2068table.is-style-stripes tbody tr:nth-child(odd),
    28192069.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    2820     background-color: #f0f0f0;
     2070    background-color: var(--table--stripes-background-color);
    28212071}
    28222072
    … …  
    28432093    font-weight: bold;
    28442094    text-align: left;
    2845     margin-bottom: 20px;
     2095    margin-bottom: var(--global--spacing-unit);
    28462096    color: currentColor;
    28472097}
    … …  
    28492099.wp-calendar-nav {
    28502100    text-align: left;
    2851     margin-top: 10px;
     2101    margin-top: calc(var(--global--spacing-unit) / 2);
    28522102}
    28532103
    … …  
    28742124}
    28752125
    2876 :root .is-extra-small-text {
    2877     font-size: 1rem;
    2878 }
    2879 
     2126:root .is-extra-small-text,
    28802127:root .has-extra-small-font-size {
    2881     font-size: 1rem;
    2882 }
    2883 
    2884 :root .is-small-text {
    2885     font-size: 1.125rem;
    2886 }
    2887 
     2128    font-size: var(--global--font-size-xs);
     2129}
     2130
     2131:root .is-small-text,
    28882132:root .has-small-font-size {
    2889     font-size: 1.125rem;
    2890 }
    2891 
    2892 :root .is-regular-text {
    2893     font-size: 1.25rem;
    2894 }
    2895 
    2896 :root .has-regular-font-size {
    2897     font-size: 1.25rem;
    2898 }
    2899 
    2900 :root .is-normal-font-size {
    2901     font-size: 1.25rem;
    2902 }
    2903 
    2904 :root .has-normal-font-size {
    2905     font-size: 1.25rem;
    2906 }
    2907 
     2133    font-size: var(--global--font-size-sm);
     2134}
     2135
     2136:root .is-regular-text,
     2137:root .has-regular-font-size,
     2138:root .is-normal-font-size,
     2139:root .has-normal-font-size,
    29082140:root .has-medium-font-size {
    2909     font-size: 1.25rem;
    2910 }
    2911 
    2912 :root .is-large-text {
    2913     font-size: 1.5rem;
    2914     line-height: 1.3;
    2915 }
    2916 
     2141    font-size: var(--global--font-size-base);
     2142}
     2143
     2144:root .is-large-text,
    29172145:root .has-large-font-size {
    2918     font-size: 1.5rem;
    2919     line-height: 1.3;
    2920 }
    2921 
    2922 :root .is-larger-text {
    2923     font-size: 2.5rem;
    2924     line-height: 1.3;
    2925 }
    2926 @media only screen and (min-width: 652px) {
    2927 
    2928     :root .is-larger-text {
    2929         font-size: 2.5rem;
    2930     }
    2931 }
    2932 
    2933 :root .has-larger-font-size {
    2934     font-size: 2.5rem;
    2935     line-height: 1.3;
    2936 }
    2937 @media only screen and (min-width: 652px) {
    2938 
    2939     :root .has-larger-font-size {
    2940         font-size: 2.5rem;
    2941     }
    2942 }
    2943 
    2944 :root .is-extra-large-text {
    2945     font-size: 2.5rem;
    2946     line-height: 1.3;
    2947 }
    2948 @media only screen and (min-width: 652px) {
    2949 
    2950     :root .is-extra-large-text {
    2951         font-size: 2.5rem;
    2952     }
    2953 }
    2954 
     2146    font-size: var(--global--font-size-lg);
     2147    line-height: var(--global--line-height-heading);
     2148}
     2149
     2150:root .is-larger-text,
     2151:root .has-larger-font-size,
     2152:root .is-extra-large-text,
    29552153:root .has-extra-large-font-size {
    2956     font-size: 2.5rem;
    2957     line-height: 1.3;
    2958 }
    2959 @media only screen and (min-width: 652px) {
    2960 
    2961     :root .has-extra-large-font-size {
    2962         font-size: 2.5rem;
    2963     }
    2964 }
    2965 
    2966 :root .is-huge-text {
    2967     font-size: 6rem;
    2968     line-height: 1.3;
    2969     font-weight: 300;
    2970 }
    2971 @media only screen and (min-width: 652px) {
    2972 
    2973     :root .is-huge-text {
    2974         font-size: 6rem;
    2975     }
    2976 }
    2977 
     2154    font-size: var(--global--font-size-xl);
     2155    line-height: var(--global--line-height-heading);
     2156}
     2157
     2158:root .is-huge-text,
    29782159:root .has-huge-font-size {
    2979     font-size: 6rem;
    2980     line-height: 1.3;
    2981     font-weight: 300;
    2982 }
    2983 @media only screen and (min-width: 652px) {
    2984 
    2985     :root .has-huge-font-size {
    2986         font-size: 6rem;
    2987     }
    2988 }
    2989 
    2990 :root .is-gigantic-text {
    2991     font-size: 9rem;
    2992     line-height: 1.3;
    2993     font-weight: 300;
    2994 }
    2995 @media only screen and (min-width: 652px) {
    2996 
    2997     :root .is-gigantic-text {
    2998         font-size: 9rem;
    2999     }
    3000 }
    3001 
     2160    font-size: var(--global--font-size-xxl);
     2161    line-height: var(--global--line-height-heading);
     2162    font-weight: var(--heading--font-weight-page-title);
     2163}
     2164
     2165:root .is-gigantic-text,
    30022166:root .has-gigantic-font-size {
    3003     font-size: 9rem;
    3004     line-height: 1.3;
    3005     font-weight: 300;
    3006 }
    3007 @media only screen and (min-width: 652px) {
    3008 
    3009     :root .has-gigantic-font-size {
    3010         font-size: 9rem;
    3011     }
     2167    font-size: var(--global--font-size-xxxl);
     2168    line-height: var(--global--line-height-heading);
     2169    font-weight: var(--heading--font-weight-page-title);
    30122170}
    30132171
    … …  
    30172175*/
    30182176.wp-block.editor-post-title__block {
    3019     border-bottom: 3px solid #28303d;
    3020     padding-bottom: 60px;
    3021     margin-bottom: 90px;
    3022     max-width: calc(100vw - 30px);
    3023 }
    3024 @media only screen and (min-width: 482px) {
    3025 
    3026     .wp-block.editor-post-title__block {
    3027         max-width: calc(100vw - 100px);
    3028     }
    3029 }
    3030 @media only screen and (min-width: 822px) {
    3031 
    3032     .wp-block.editor-post-title__block {
    3033         max-width: min(calc(100vw - 200px), 1240px);
    3034     }
     2177    border-bottom: 3px solid var(--global--color-border);
     2178    padding-bottom: calc(2 * var(--global--spacing-vertical));
     2179    margin-bottom: calc(3 * var(--global--spacing-vertical));
     2180    max-width: var(--responsive--alignwide-width);
    30352181}
    30362182
    30372183.wp-block.editor-post-title__block .editor-post-title__input {
    3038     color: #39414d;
    3039     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3040     font-size: 4rem;
    3041     font-weight: 300;
    3042     line-height: 1.1;
    3043 }
    3044 @media only screen and (min-width: 652px) {
    3045 
    3046     .wp-block.editor-post-title__block .editor-post-title__input {
    3047         font-size: 6rem;
    3048     }
     2184    color: var(--global--color-secondary);
     2185    font-family: var(--heading--font-family);
     2186    font-size: var(--global--font-size-page-title);
     2187    font-weight: var(--heading--font-weight-page-title);
     2188    line-height: var(--heading--line-height-h1);
    30492189}
    30502190
    30512191.wp-block.block-editor-default-block-appender > textarea {
    3052     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3053     font-size: 1.25rem;
     2192    font-family: var(--global--font-secondary);
     2193    font-size: var(--global--font-size-md);
    30542194}
    30552195
    30562196.has-primary-color[class] {
    3057     color: #28303d;
     2197    color: var(--global--color-primary);
    30582198}
    30592199
    30602200.has-secondary-color[class] {
    3061     color: #39414d;
    3062 }
    3063 
    3064 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     2201    color: var(--global--color-secondary);
     2202}
     2203
     2204.has-background a,
    30652205.has-background p,
    30662206.has-background h1,
    … …  
    30742214
    30752215.has-primary-background-color[class] {
    3076     background-color: #28303d;
    3077     color: #d1e4dd;
     2216    background-color: var(--global--color-primary);
     2217    color: var(--global--color-background);
    30782218}
    30792219
    30802220.has-secondary-background-color[class] {
    3081     background-color: #39414d;
    3082     color: #d1e4dd;
     2221    background-color: var(--global--color-secondary);
     2222    color: var(--global--color-background);
    30832223}
    30842224
    30852225.has-white-background-color[class] {
    3086     background-color: #fff;
    3087     color: #39414d;
     2226    background-color: var(--global--color-white);
     2227    color: var(--global--color-secondary);
    30882228}
    30892229
    30902230.has-black-background-color[class] {
    3091     background-color: #000;
    3092     color: #28303d;
    3093 }
    3094 
    3095 /**
    3096  * Spacing Overrides
    3097  */
     2231    background-color: var(--global--color-black);
     2232    color: var(--global--color-primary);
     2233}
     2234
    30982235[data-block] {
    3099     margin-top: 30px;
    3100     margin-bottom: 30px;
    3101 }
    3102 
    3103 [data-block] [data-block]:first-child {
    3104     margin-top: 0;
    3105 }
    3106 
    3107 [data-block] [data-block]:nth-last-child(2) {
    3108     margin-bottom: 0;
    3109 }
    3110 
    3111 /* Block Alignments */
     2236    margin-top: var(--global--spacing-vertical);
     2237    margin-bottom: var(--global--spacing-vertical);
     2238}
     2239
    31122240.wp-block {
    3113     max-width: calc(100vw - 30px);
    3114 }
    3115 @media only screen and (min-width: 482px) {
    3116 
    3117     .wp-block {
    3118         max-width: min(calc(100vw - 100px), 610px);
    3119     }
    3120 }
    3121 @media only screen and (min-width: 822px) {
    3122 
    3123     .wp-block {
    3124         max-width: min(calc(100vw - 200px), 610px);
    3125     }
    3126 }
    3127 
    3128 .wp-block[data-align=wide] {
    3129     max-width: calc(100vw - 30px);
    3130 }
    3131 @media only screen and (min-width: 482px) {
    3132 
    3133     .wp-block[data-align=wide] {
    3134         max-width: calc(100vw - 100px);
    3135     }
    3136 }
    3137 @media only screen and (min-width: 822px) {
    3138 
    3139     .wp-block[data-align=wide] {
    3140         max-width: min(calc(100vw - 200px), 1240px);
    3141     }
    3142 }
    3143 
     2241    max-width: var(--responsive--aligndefault-width);
     2242}
     2243
     2244.wp-block[data-align=wide],
    31442245.wp-block.alignwide {
    3145     max-width: calc(100vw - 30px);
    3146 }
    3147 @media only screen and (min-width: 482px) {
    3148 
    3149     .wp-block.alignwide {
    3150         max-width: calc(100vw - 100px);
    3151     }
    3152 }
    3153 @media only screen and (min-width: 822px) {
    3154 
    3155     .wp-block.alignwide {
    3156         max-width: min(calc(100vw - 200px), 1240px);
    3157     }
     2246    max-width: var(--responsive--alignwide-width);
    31582247}
    31592248
    … …  
    31652254.alignleft {
    31662255    margin: 0;
    3167     margin-right: 25px;
     2256    margin-right: var(--global--spacing-horizontal);
    31682257}
    31692258
    31702259.alignright {
    31712260    margin: 0;
    3172     margin-left: 25px;
     2261    margin-left: var(--global--spacing-horizontal);
    31732262}
    31742263
    31752264.has-drop-cap:not(:focus)::first-letter {
    3176     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3177     font-weight: normal;
     2265    font-family: var(--heading--font-family);
     2266    font-weight: var(--heading--font-weight);
    31782267    line-height: 0.66;
    31792268    text-transform: uppercase;
    … …  
    31812270    float: left;
    31822271    margin: 0.1em 0.1em 0 0;
    3183     font-size: 5rem;
    3184 }
    3185 
    3186 @media only screen and (min-width: 652px) {
    3187 
    3188     .has-drop-cap:not(:focus)::first-letter {
    3189         font-size: 7rem;
    3190     }
     2272    font-size: calc(1.2 * var(--heading--font-size-h1));
    31912273}
    31922274
    … …  
    31952277    .wp-block[data-align=left] > * {
    31962278        max-width: 290px;
    3197         margin-right: 25px;
     2279        margin-right: var(--global--spacing-horizontal);
    31982280    }
    31992281
    32002282    .wp-block[data-align=right] > * {
    32012283        max-width: 290px;
    3202         margin-left: 25px;
    3203     }
     2284        margin-left: var(--global--spacing-horizontal);
     2285    }
     2286}
     2287
     2288.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     2289    border: none;
     2290}
     2291
     2292.wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
     2293    left: 5px;
    32042294}
    32052295
    32062296html {
    3207     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3208     line-height: 1.7;
     2297    font-family: var(--global--font-secondary);
     2298    line-height: var(--global--line-height-body);
    32092299}
    32102300
    32112301body {
    3212     color: #28303d;
    3213     background-color: #d1e4dd;
    3214     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3215     font-size: 1.25rem;
     2302    --wp--typography--line-height: var(--global--line-height-body);
     2303    color: var(--global--color-primary);
     2304    background-color: var(--global--color-background);
     2305    font-family: var(--global--font-secondary);
     2306    font-size: var(--global--font-size-base);
    32162307    font-weight: normal;
    32172308    -moz-osx-font-smoothing: grayscale;
    … …  
    32202311
    32212312.wp-block a {
    3222     color: #28303d;
     2313    color: var(--wp--style--color--link, var(--global--color-primary));
    32232314}
    32242315
    … …  
    32282319
    32292320.wp-block a:focus {
    3230     outline: 2px solid #28303d;
     2321    outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
    32312322    text-decoration: none;
    32322323}
    32332324
    3234 .has-background:not(.has-background-background-color) .has-link-color a {
    3235     color: #28303d;
    3236 }
    3237 
    3238 .has-background:not(.has-background-background-color).has-link-color a {
    3239     color: #28303d;
     2325.has-background .has-link-color a,
     2326.has-background.has-link-color a {
     2327    color: var(--wp--style--color--link, var(--global--color-primary));
    32402328}
    32412329
    … …  
    32462334
    32472335.has-black-color[class] {
    3248     color: #000;
     2336    color: var(--global--color-black);
    32492337}
    32502338
    32512339.has-gray-color[class] {
    3252     color: #39414d;
     2340    color: var(--global--color-gray);
    32532341}
    32542342
    32552343.has-dark-gray-color[class] {
    3256     color: #28303d;
     2344    color: var(--global--color-dark-gray);
    32572345}
    32582346
    32592347.has-green-color[class] {
    3260     color: #d1e4dd;
     2348    color: var(--global--color-green);
    32612349}
    32622350
    32632351.has-blue-color[class] {
    3264     color: #d1dfe4;
     2352    color: var(--global--color-blue);
    32652353}
    32662354
    32672355.has-purple-color[class] {
    3268     color: #d1d1e4;
     2356    color: var(--global--color-purple);
    32692357}
    32702358
    32712359.has-red-color[class] {
    3272     color: #e4d1d1;
     2360    color: var(--global--color-red);
    32732361}
    32742362
    32752363.has-orange-color[class] {
    3276     color: #e4dad1;
     2364    color: var(--global--color-orange);
    32772365}
    32782366
    32792367.has-yellow-color[class] {
    3280     color: #eeeadd;
     2368    color: var(--global--color-yellow);
    32812369}
    32822370
    32832371.has-white-color[class] {
    3284     color: #fff;
    3285 }
    3286 
    3287 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     2372    color: var(--global--color-white);
     2373}
     2374
     2375.has-background a,
    32882376.has-background p,
    32892377.has-background h1,
    … …  
    32972385
    32982386.has-black-background-color[class] {
    3299     background-color: #000;
     2387    background-color: var(--global--color-black);
    33002388}
    33012389
    33022390.has-gray-background-color[class] {
    3303     background-color: #39414d;
     2391    background-color: var(--global--color-gray);
    33042392}
    33052393
    33062394.has-dark-gray-background-color[class] {
    3307     background-color: #28303d;
     2395    background-color: var(--global--color-dark-gray);
    33082396}
    33092397
    33102398.has-green-background-color[class] {
    3311     background-color: #d1e4dd;
     2399    background-color: var(--global--color-green);
    33122400}
    33132401
    33142402.has-blue-background-color[class] {
    3315     background-color: #d1dfe4;
     2403    background-color: var(--global--color-blue);
    33162404}
    33172405
    33182406.has-purple-background-color[class] {
    3319     background-color: #d1d1e4;
     2407    background-color: var(--global--color-purple);
    33202408}
    33212409
    33222410.has-red-background-color[class] {
    3323     background-color: #e4d1d1;
     2411    background-color: var(--global--color-red);
    33242412}
    33252413
    33262414.has-orange-background-color[class] {
    3327     background-color: #e4dad1;
     2415    background-color: var(--global--color-orange);
    33282416}
    33292417
    33302418.has-yellow-background-color[class] {
    3331     background-color: #eeeadd;
     2419    background-color: var(--global--color-yellow);
    33322420}
    33332421
    33342422.has-white-background-color[class] {
    3335     background-color: #fff;
    3336 }
    3337 
    3338 :not(.has-text-color).has-black-background-color[class] {
    3339     color: #fff;
    3340 }
    3341 
    3342 :not(.has-text-color).has-gray-background-color[class] {
    3343     color: #fff;
    3344 }
    3345 
     2423    background-color: var(--global--color-white);
     2424}
     2425
     2426:not(.has-text-color).has-black-background-color[class],
     2427:not(.has-text-color).has-gray-background-color[class],
    33462428:not(.has-text-color).has-dark-gray-background-color[class] {
    3347     color: #fff;
    3348 }
    3349 
    3350 :not(.has-text-color).has-green-background-color[class] {
    3351     color: #28303d;
    3352 }
    3353 
    3354 :not(.has-text-color).has-blue-background-color[class] {
    3355     color: #28303d;
    3356 }
    3357 
    3358 :not(.has-text-color).has-purple-background-color[class] {
    3359     color: #28303d;
    3360 }
    3361 
    3362 :not(.has-text-color).has-red-background-color[class] {
    3363     color: #28303d;
    3364 }
    3365 
    3366 :not(.has-text-color).has-orange-background-color[class] {
    3367     color: #28303d;
    3368 }
    3369 
    3370 :not(.has-text-color).has-yellow-background-color[class] {
    3371     color: #28303d;
    3372 }
    3373 
     2429    color: var(--global--color-white);
     2430}
     2431
     2432:not(.has-text-color).has-green-background-color[class],
     2433:not(.has-text-color).has-blue-background-color[class],
     2434:not(.has-text-color).has-purple-background-color[class],
     2435:not(.has-text-color).has-red-background-color[class],
     2436:not(.has-text-color).has-orange-background-color[class],
     2437:not(.has-text-color).has-yellow-background-color[class],
    33742438:not(.has-text-color).has-white-background-color[class] {
    3375     color: #28303d;
     2439    color: var(--global--color-dark-gray);
    33762440}
    33772441
    33782442.has-purple-to-yellow-gradient-background {
    3379     background: linear-gradient(160deg, #d1d1e4, #eeeadd);
     2443    background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
    33802444}
    33812445
    33822446.has-yellow-to-purple-gradient-background {
    3383     background: linear-gradient(160deg, #eeeadd, #d1d1e4);
     2447    background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
    33842448}
    33852449
    33862450.has-green-to-yellow-gradient-background {
    3387     background: linear-gradient(160deg, #d1e4dd, #eeeadd);
     2451    background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
    33882452}
    33892453
    33902454.has-yellow-to-green-gradient-background {
    3391     background: linear-gradient(160deg, #eeeadd, #d1e4dd);
     2455    background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
    33922456}
    33932457
    33942458.has-red-to-yellow-gradient-background {
    3395     background: linear-gradient(160deg, #e4d1d1, #eeeadd);
     2459    background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
    33962460}
    33972461
    33982462.has-yellow-to-red-gradient-background {
    3399     background: linear-gradient(160deg, #eeeadd, #e4d1d1);
     2463    background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
    34002464}
    34012465
    34022466.has-purple-to-red-gradient-background {
    3403     background: linear-gradient(160deg, #d1d1e4, #e4d1d1);
     2467    background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
    34042468}
    34052469
    34062470.has-red-to-purple-gradient-background {
    3407     background: linear-gradient(160deg, #e4d1d1, #d1d1e4);
    3408 }
     2471    background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
     2472}

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/css/ie.css

    r49633 r49728  
    102102
    103103    /* Font Family */
     104    --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
     105    --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    104106
    105107    /* Font Size */
     108    --global--font-size-base: 1.25rem;
     109    --global--font-size-xs: 1rem;
     110    --global--font-size-sm: 1.125rem;
     111    --global--font-size-md: 1.25rem;
     112    --global--font-size-lg: 1.5rem;
     113    --global--font-size-xl: 2.25rem;
     114    --global--font-size-xxl: 4rem;
     115    --global--font-size-xxxl: 5rem;
     116    --global--font-size-page-title: var(--global--font-size-xxl);
     117    --global--letter-spacing: normal;
    106118
    107119    /* Line Height */
     120    --global--line-height-body: 1.7;
     121    --global--line-height-heading: 1.3;
     122    --global--line-height-page-title: 1.1;
    108123
    109124    /* Headings */
     125    --heading--font-family: var(--global--font-primary);
     126    --heading--font-size-h6: var(--global--font-size-xs);
     127    --heading--font-size-h5: var(--global--font-size-sm);
     128    --heading--font-size-h4: var(--global--font-size-lg);
     129    --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
     130    --heading--font-size-h2: var(--global--font-size-xl);
     131    --heading--font-size-h1: var(--global--font-size-page-title);
     132    --heading--letter-spacing-h6: 0.05em;
     133    --heading--letter-spacing-h5: 0.05em;
     134    --heading--letter-spacing-h4: var(--global--letter-spacing);
     135    --heading--letter-spacing-h3: var(--global--letter-spacing);
     136    --heading--letter-spacing-h2: var(--global--letter-spacing);
     137    --heading--letter-spacing-h1: var(--global--letter-spacing);
     138    --heading--line-height-h6: var(--global--line-height-heading);
     139    --heading--line-height-h5: var(--global--line-height-heading);
     140    --heading--line-height-h4: var(--global--line-height-heading);
     141    --heading--line-height-h3: var(--global--line-height-heading);
     142    --heading--line-height-h2: var(--global--line-height-heading);
     143    --heading--line-height-h1: var(--global--line-height-page-title);
     144    --heading--font-weight: normal;
     145    --heading--font-weight-page-title: 300;
     146    --heading--font-weight-strong: 600;
    110147
    111148    /* Block: Latest posts */
     149    --latest-posts--title-font-family: var(--heading--font-family);
     150    --latest-posts--title-font-size: var(--heading--font-size-h3);
     151    --latest-posts--description-font-family: var(--global--font-secondary);
     152    --latest-posts--description-font-size: var(--global--font-size-sm);
     153    --list--font-family: var(--global--font-secondary);
     154    --definition-term--font-family: var(--global--font-primary);
    112155
    113156    /* Colors */
     157    --global--color-black: #000;
     158    --global--color-dark-gray: #28303d;
     159    --global--color-gray: #39414d;
     160    --global--color-light-gray: #f0f0f0;
     161    --global--color-green: #d1e4dd;
     162    --global--color-blue: #d1dfe4;
     163    --global--color-purple: #d1d1e4;
     164    --global--color-red: #e4d1d1;
     165    --global--color-orange: #e4dad1;
     166    --global--color-yellow: #eeeadd;
     167    --global--color-white: #fff;
     168    --global--color-white-50: rgba(255, 255, 255, 0.5);
     169    --global--color-white-90: rgba(255, 255, 255, 0.9);
     170    --global--color-primary: var(--global--color-dark-gray);
    114171
    115172    /* Body text color, site title, footer text color. */
     173    --global--color-secondary: var(--global--color-gray);
    116174
    117175    /* Headings */
     176    --global--color-primary-hover: var(--global--color-primary);
     177    --global--color-background: var(--global--color-green);
    118178
    119179    /* Mint, default body background */
     180    --global--color-border: var(--global--color-primary);
    120181
    121182    /* Used for borders (separators) */
    122183
    123184    /* Spacing */
     185    --global--spacing-unit: 20px;
     186    --global--spacing-measure: unset;
     187    --global--spacing-horizontal: 25px;
     188    --global--spacing-vertical: 30px;
    124189
    125190    /* Elevation */
     191    --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    126192
    127193    /* Forms */
     194    --form--font-family: var(--global--font-secondary);
     195    --form--font-size: var(--global--font-size-sm);
     196    --form--line-height: var(--global--line-height-body);
     197    --form--color-text: var(--global--color-dark-gray);
     198    --form--color-ranged: var(--global--color-secondary);
     199    --form--label-weight: 500;
     200    --form--border-color: var(--global--color-secondary);
     201    --form--border-width: 3px;
     202    --form--border-radius: 0;
     203    --form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
    128204
    129205    /* Cover block */
     206    --cover--height: calc(15 * var(--global--spacing-vertical));
     207    --cover--color-foreground: var(--global--color-white);
     208    --cover--color-background: var(--global--color-black);
    130209
    131210    /* Buttons */
     211    --button--color-text: var(--global--color-background);
     212    --button--color-text-hover: var(--global--color-secondary);
     213    --button--color-text-active: var(--global--color-secondary);
     214    --button--color-background: var(--global--color-secondary);
     215    --button--color-background-active: var(--global--color-background);
     216    --button--font-family: var(--global--font-primary);
     217    --button--font-size: var(--global--font-size-base);
     218    --button--font-weight: 500;
     219    --button--line-height: 1.5;
     220    --button--border-width: 3px;
     221    --button--border-radius: 0;
     222    --button--padding-vertical: 15px;
     223    --button--padding-horizontal: calc(2 * var(--button--padding-vertical));
    132224
    133225    /* entry */
     226    --entry-header--color: var(--global--color-primary);
     227    --entry-header--color-link: currentColor;
     228    --entry-header--color-hover: var(--global--color-primary-hover);
     229    --entry-header--color-focus: var(--global--color-secondary);
     230    --entry-header--font-size: var(--heading--font-size-h2);
     231    --entry-content--font-family: var(--global--font-secondary);
     232    --entry-author-bio--font-family: var(--heading--font-family);
     233    --entry-author-bio--font-size: var(--heading--font-size-h4);
    134234
    135235    /* Header */
     236    --branding--color-text: var(--global--color-primary);
     237    --branding--color-link: var(--global--color-primary);
     238    --branding--color-link-hover: var(--global--color-secondary);
     239    --branding--title--font-family: var(--global--font-primary);
     240    --branding--title--font-size: var(--global--font-size-lg);
     241    --branding--title--font-size-mobile: var(--heading--font-size-h4);
     242    --branding--title--font-weight: normal;
     243    --branding--title--text-transform: uppercase;
     244    --branding--description--font-family: var(--global--font-secondary);
     245    --branding--description--font-size: var(--global--font-size-sm);
     246    --branding--description--font-family: var(--global--font-secondary);
     247    --branding--logo--max-width: 300px;
     248    --branding--logo--max-height: 100px;
     249    --branding--logo--max-width-mobile: 96px;
     250    --branding--logo--max-height-mobile: 96px;
    136251
    137252    /* Main navigation */
     253    --primary-nav--font-family: var(--global--font-secondary);
     254    --primary-nav--font-family-mobile: var(--global--font-primary);
     255    --primary-nav--font-size: var(--global--font-size-md);
     256    --primary-nav--font-size-sub-menu: var(--global--font-size-xs);
     257    --primary-nav--font-size-mobile: var(--global--font-size-sm);
     258    --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
     259    --primary-nav--font-size-button: var(--global--font-size-xs);
     260    --primary-nav--font-style: normal;
     261    --primary-nav--font-style-sub-menu-mobile: normal;
     262    --primary-nav--font-weight: normal;
     263    --primary-nav--font-weight-button: 500;
     264    --primary-nav--color-link: var(--global--color-primary);
     265    --primary-nav--color-link-hover: var(--global--color-primary-hover);
     266    --primary-nav--color-text: var(--global--color-primary);
     267    --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
     268    --primary-nav--border-color: var(--global--color-primary);
    138269
    139270    /* Pagination */
     271    --pagination--color-text: var(--global--color-primary);
     272    --pagination--color-link-hover: var(--global--color-primary-hover);
     273    --pagination--font-family: var(--global--font-secondary);
     274    --pagination--font-size: var(--global--font-size-lg);
     275    --pagination--font-weight: normal;
     276    --pagination--font-weight-strong: 600;
    140277
    141278    /* Footer */
     279    --footer--color-text: var(--global--color-primary);
     280    --footer--color-link: var(--global--color-primary);
     281    --footer--color-link-hover: var(--global--color-primary-hover);
     282    --footer--font-family: var(--global--font-primary);
     283    --footer--font-size: var(--global--font-size-sm);
    142284
    143285    /* Block: Pull quote */
     286    --pullquote--font-family: var(--global--font-primary);
     287    --pullquote--font-size: var(--heading--font-size-h3);
     288    --pullquote--font-style: normal;
     289    --pullquote--letter-spacing: var(--heading--letter-spacing-h4);
     290    --pullquote--line-height: var(--global--line-height-heading);
     291    --pullquote--border-width: 3px;
     292    --pullquote--border-color: var(--global--color-primary);
     293    --pullquote--color-foreground: var(--global--color-primary);
     294    --pullquote--color-background: var(--global--color-background);
     295    --quote--font-family: var(--global--font-secondary);
     296    --quote--font-size: var(--global--font-size-md);
     297    --quote--font-size-large: var(--global--font-size-xl);
     298    --quote--font-style: normal;
     299    --quote--font-weight: 700;
     300    --quote--font-weight-strong: bolder;
     301    --quote--font-style-large: normal;
     302    --quote--font-style-cite: normal;
     303    --quote--line-height: var(--global--line-height-body);
     304    --quote--line-height-large: 1.35;
     305    --separator--border-color: var(--global--color-border);
     306    --separator--height: 1px;
    144307
    145308    /* Block: Table */
     309    --table--stripes-border-color: var(--global--color-light-gray);
     310    --table--stripes-background-color: var(--global--color-light-gray);
     311    --table--has-background-text-color: var(--global--color-dark-gray);
    146312
    147313    /* Widgets */
     314    --widget--line-height-list: 1.9;
     315    --widget--line-height-title: 1.4;
     316    --widget--font-weight-title: 700;
     317    --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
    148318
    149319    /* Admin-bar height */
     320    --global--admin-bar--height: 0;
     321}
     322
     323.admin-bar {
     324    --global--admin-bar--height: 32px;
     325}
     326@media only screen and (max-width: 782px) {
     327
     328    .admin-bar {
     329        --global--admin-bar--height: 46px;
     330    }
     331}
     332
     333@media only screen and (min-width: 652px) {
     334
     335    :root {
     336        --global--font-size-xl: 2.5rem;
     337        --global--font-size-xxl: 6rem;
     338        --global--font-size-xxxl: 9rem;
     339        --heading--font-size-h3: 2rem;
     340        --heading--font-size-h2: 3rem;
     341    }
    150342}
    151343
    … …  
    540732 * Root Media Query Variables
    541733 */
     734:root {
     735    --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
     736    --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
     737    --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
     738    --responsive--alignfull-width: 100%;
     739    --responsive--alignright-margin: var(--global--spacing-horizontal);
     740    --responsive--alignleft-margin: var(--global--spacing-horizontal);
     741}
     742
     743@media only screen and (min-width: 482px) {
     744
     745    :root {
     746        --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
     747        --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
     748        --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     749        --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     750    }
     751}
     752@media only screen and (min-width: 822px) {
     753
     754    :root {
     755        --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
     756        --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
     757    }
     758}
    542759
    543760/**
    544761 * Extends
    545762 */
    546 .post-thumbnail {
    547     max-width: calc(100vw - 30px);
     763.post-thumbnail,
     764.entry-content .wp-audio-shortcode,
     765.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
     766*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
     767.default-max-width {
     768    max-width: var(--responsive--aligndefault-width);
    548769    margin-left: auto;
    549770    margin-right: auto;
    550771}
    551 @media only screen and (min-width: 482px) {
    552 
    553     .post-thumbnail {
    554         max-width: min(calc(100vw - 100px), 610px);
    555     }
    556 }
    557 @media only screen and (min-width: 822px) {
    558 
    559     .post-thumbnail {
    560         max-width: min(calc(100vw - 200px), 610px);
    561     }
    562 }
    563 
    564 .entry-content .wp-audio-shortcode {
    565     max-width: calc(100vw - 30px);
     772
     773.widget-area,
     774.pagination,
     775.comments-pagination,
     776.post-navigation,
     777.site-footer,
     778.site-header,
     779.alignwide,
     780.wide-max-width {
     781    max-width: var(--responsive--alignwide-width);
    566782    margin-left: auto;
    567783    margin-right: auto;
    568784}
    569 @media only screen and (min-width: 482px) {
    570 
    571     .entry-content .wp-audio-shortcode {
    572         max-width: min(calc(100vw - 100px), 610px);
    573     }
    574 }
    575 @media only screen and (min-width: 822px) {
    576 
    577     .entry-content .wp-audio-shortcode {
    578         max-width: min(calc(100vw - 200px), 610px);
    579     }
    580 }
    581 
    582 .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    583     max-width: calc(100vw - 30px);
     785
     786.alignfull,
     787.wp-block-group .wp-block-group__inner-container > *.alignfull,
     788.full-max-width {
     789    max-width: var(--responsive--alignfull-width);
     790    width: var(--responsive--alignfull-width);
    584791    margin-left: auto;
    585792    margin-right: auto;
    586793}
     794
    587795@media only screen and (min-width: 482px) {
    588796
    589     .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    590         max-width: min(calc(100vw - 100px), 610px);
    591     }
    592 }
    593 @media only screen and (min-width: 822px) {
    594 
    595     .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    596         max-width: min(calc(100vw - 200px), 610px);
    597     }
    598 }
    599 
    600 *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    601     max-width: calc(100vw - 30px);
    602     margin-left: auto;
    603     margin-right: auto;
    604 }
    605 @media only screen and (min-width: 482px) {
    606 
    607     *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    608         max-width: min(calc(100vw - 100px), 610px);
    609     }
    610 }
    611 @media only screen and (min-width: 822px) {
    612 
    613     *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    614         max-width: min(calc(100vw - 200px), 610px);
    615     }
    616 }
    617 
    618 .default-max-width {
    619     max-width: calc(100vw - 30px);
    620     margin-left: auto;
    621     margin-right: auto;
    622 }
    623 @media only screen and (min-width: 482px) {
    624 
    625     .default-max-width {
    626         max-width: min(calc(100vw - 100px), 610px);
    627     }
    628 }
    629 @media only screen and (min-width: 822px) {
    630 
    631     .default-max-width {
    632         max-width: min(calc(100vw - 200px), 610px);
    633     }
    634 }
    635 
    636 .widget-area {
    637     max-width: calc(100vw - 30px);
    638     margin-left: auto;
    639     margin-right: auto;
    640 }
    641 
    642 @media only screen and (min-width: 482px) {
    643 
    644     .widget-area {
    645         max-width: calc(100vw - 100px);
    646     }
    647 }
    648 
    649 @media only screen and (min-width: 822px) {
    650 
    651     .widget-area {
    652         max-width: min(calc(100vw - 200px), 1240px);
    653     }
    654 }
    655 
    656 .pagination {
    657     max-width: calc(100vw - 30px);
    658     margin-left: auto;
    659     margin-right: auto;
    660 }
    661 
    662 @media only screen and (min-width: 482px) {
    663 
    664     .pagination {
    665         max-width: calc(100vw - 100px);
    666     }
    667 }
    668 
    669 @media only screen and (min-width: 822px) {
    670 
    671     .pagination {
    672         max-width: min(calc(100vw - 200px), 1240px);
    673     }
    674 }
    675 
    676 .comments-pagination {
    677     max-width: calc(100vw - 30px);
    678     margin-left: auto;
    679     margin-right: auto;
    680 }
    681 
    682 @media only screen and (min-width: 482px) {
    683 
    684     .comments-pagination {
    685         max-width: calc(100vw - 100px);
    686     }
    687 }
    688 
    689 @media only screen and (min-width: 822px) {
    690 
    691     .comments-pagination {
    692         max-width: min(calc(100vw - 200px), 1240px);
    693     }
    694 }
    695 
    696 .post-navigation {
    697     max-width: calc(100vw - 30px);
    698     margin-left: auto;
    699     margin-right: auto;
    700 }
    701 
    702 @media only screen and (min-width: 482px) {
    703 
    704     .post-navigation {
    705         max-width: calc(100vw - 100px);
    706     }
    707 }
    708 
    709 @media only screen and (min-width: 822px) {
    710 
    711     .post-navigation {
    712         max-width: min(calc(100vw - 200px), 1240px);
    713     }
    714 }
    715 
    716 .site-footer {
    717     max-width: calc(100vw - 30px);
    718     margin-left: auto;
    719     margin-right: auto;
    720 }
    721 
    722 @media only screen and (min-width: 482px) {
    723 
    724     .site-footer {
    725         max-width: calc(100vw - 100px);
    726     }
    727 }
    728 
    729 @media only screen and (min-width: 822px) {
    730 
    731     .site-footer {
    732         max-width: min(calc(100vw - 200px), 1240px);
    733     }
    734 }
    735 
    736 .site-header {
    737     max-width: calc(100vw - 30px);
    738     margin-left: auto;
    739     margin-right: auto;
    740 }
    741 
    742 @media only screen and (min-width: 482px) {
    743 
    744     .site-header {
    745         max-width: calc(100vw - 100px);
    746     }
    747 }
    748 
    749 @media only screen and (min-width: 822px) {
    750 
    751     .site-header {
    752         max-width: min(calc(100vw - 200px), 1240px);
    753     }
    754 }
    755 
    756 .alignwide {
    757     max-width: calc(100vw - 30px);
    758     margin-left: auto;
    759     margin-right: auto;
    760 }
    761 
    762 @media only screen and (min-width: 482px) {
    763 
    764     .alignwide {
    765         max-width: calc(100vw - 100px);
    766     }
    767 }
    768 
    769 @media only screen and (min-width: 822px) {
    770 
    771     .alignwide {
    772         max-width: min(calc(100vw - 200px), 1240px);
    773     }
    774 }
    775 
    776 .wide-max-width {
    777     max-width: calc(100vw - 30px);
    778     margin-left: auto;
    779     margin-right: auto;
    780 }
    781 
    782 @media only screen and (min-width: 482px) {
    783 
    784     .wide-max-width {
    785         max-width: calc(100vw - 100px);
    786     }
    787 }
    788 
    789 @media only screen and (min-width: 822px) {
    790 
    791     .wide-max-width {
    792         max-width: min(calc(100vw - 200px), 1240px);
    793     }
    794 }
    795 
    796 .alignfull {
    797     max-width: 100%;
    798     width: 100%;
    799     margin-left: auto;
    800     margin-right: auto;
    801 }
    802 
    803 .wp-block-group .wp-block-group__inner-container > *.alignfull {
    804     max-width: 100%;
    805     width: 100%;
    806     margin-left: auto;
    807     margin-right: auto;
    808 }
    809 
    810 .full-max-width {
    811     max-width: 100%;
    812     width: 100%;
    813     margin-left: auto;
    814     margin-right: auto;
    815 }
    816 
    817 @media only screen and (min-width: 482px) {
    818 
    819     .alignfull {
    820         max-width: 100%;
     797    .alignfull,
     798    .full-max-width {
     799        max-width: var(--responsive--alignfull-width);
    821800        width: auto;
    822801        margin-left: auto;
    823802        margin-right: auto;
    824803    }
    825 
    826     .full-max-width {
    827         max-width: 100%;
    828         width: auto;
    829         margin-left: auto;
    830         margin-right: auto;
    831     }
    832 }
    833 
    834 .entry-header .post-thumbnail {
    835     margin-left: auto;
    836     margin-right: auto;
    837     width: calc(100vw - 30px);
    838     max-width: 100%;
    839 }
    840 @media only screen and (min-width: 482px) {
    841 
    842     .entry-header .post-thumbnail {
    843         width: calc(100vw - 100px);
    844     }
    845 }
    846 @media only screen and (min-width: 822px) {
    847 
    848     .entry-header .post-thumbnail {
    849         width: min(calc(100vw - 200px), 1240px);
    850     }
    851 }
    852 
    853 .singular .post-thumbnail {
    854     margin-left: auto;
    855     margin-right: auto;
    856     width: calc(100vw - 30px);
    857     max-width: 100%;
    858 }
    859 @media only screen and (min-width: 482px) {
    860 
    861     .singular .post-thumbnail {
    862         width: calc(100vw - 100px);
    863     }
    864 }
    865 @media only screen and (min-width: 822px) {
    866 
    867     .singular .post-thumbnail {
    868         width: min(calc(100vw - 200px), 1240px);
    869     }
    870 }
    871 
    872 .alignfull [class*=inner-container] > .alignwide {
    873     margin-left: auto;
    874     margin-right: auto;
    875     width: calc(100vw - 30px);
    876     max-width: 100%;
    877 }
    878 @media only screen and (min-width: 482px) {
    879 
    880     .alignfull [class*=inner-container] > .alignwide {
    881         width: calc(100vw - 100px);
    882     }
    883 }
    884 @media only screen and (min-width: 822px) {
    885 
    886     .alignfull [class*=inner-container] > .alignwide {
    887         width: min(calc(100vw - 200px), 1240px);
    888     }
    889 }
    890 
     804}
     805
     806.entry-header .post-thumbnail,
     807.singular .post-thumbnail,
     808.alignfull [class*=inner-container] > .alignwide,
    891809.alignwide [class*=inner-container] > .alignwide {
    892810    margin-left: auto;
    893811    margin-right: auto;
    894     width: calc(100vw - 30px);
    895     max-width: 100%;
    896 }
     812    width: var(--responsive--alignwide-width);
     813    max-width: var(--responsive--alignfull-width);
     814}
     815
    897816@media only screen and (min-width: 482px) {
    898817
    899     .alignwide [class*=inner-container] > .alignwide {
    900         width: calc(100vw - 100px);
    901     }
    902 }
    903 @media only screen and (min-width: 822px) {
    904 
    905     .alignwide [class*=inner-container] > .alignwide {
    906         width: min(calc(100vw - 200px), 1240px);
    907     }
    908 }
    909 
     818    .entry-content > .alignleft {
     819
     820        /*rtl:ignore*/
     821        margin-left: var(--responsive--alignleft-margin);
     822
     823        /*rtl:ignore*/
     824        margin-right: var(--global--spacing-horizontal);
     825    }
     826}
    910827@media only screen and (min-width: 482px) {
    911828
    912     .entry-content > .alignleft {
     829    .entry-content > .alignright {
    913830
    914831        /*rtl:ignore*/
    915         margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
     832        margin-left: var(--global--spacing-horizontal);
    916833
    917834        /*rtl:ignore*/
    918         margin-right: 25px;
    919     }
    920     @media only screen and (min-width: 482px) {
    921 
    922         .entry-content > .alignleft {
    923             margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    924         }
    925     }
    926     @media only screen and (min-width: 482px) {
    927 
    928         .entry-content > .alignleft {
    929             margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    930         }
    931     }
    932     @media only screen and (min-width: 822px) {
    933 
    934         .entry-content > .alignleft {
    935             margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    936         }
    937     }
    938 }
    939 @media only screen and (min-width: 482px) {
    940 
    941     .entry-content > .alignright {
    942 
    943         /*rtl:ignore*/
    944         margin-left: 25px;
    945 
    946         /*rtl:ignore*/
    947         margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    948     }
    949     @media only screen and (min-width: 482px) {
    950 
    951         .entry-content > .alignright {
    952             margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    953         }
    954     }
    955     @media only screen and (min-width: 482px) {
    956 
    957         .entry-content > .alignright {
    958             margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    959         }
    960     }
    961     @media only screen and (min-width: 822px) {
    962 
    963         .entry-content > .alignright {
    964             margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    965         }
     835        margin-right: var(--responsive--alignright-margin);
    966836    }
    967837}
    … …  
    980850 * - Set vertical padding and horizontal margins
    981851 */
    982 .site-header {
    983     padding-top: 30px;
    984     padding-bottom: 30px;
     852.site-header,
     853.site-main,
     854.widget-area,
     855.site-footer {
     856    padding-top: var(--global--spacing-vertical);
     857    padding-bottom: var(--global--spacing-vertical);
    985858    margin-left: auto;
    986859    margin-right: auto;
    987860}
    988861
    989 .site-main {
    990     padding-top: 30px;
    991     padding-bottom: 30px;
    992     margin-left: auto;
    993     margin-right: auto;
    994 }
    995 
    996 .widget-area {
    997     padding-top: 30px;
    998     padding-bottom: 30px;
    999     margin-left: auto;
    1000     margin-right: auto;
    1001 }
    1002 
    1003 .site-footer {
    1004     padding-top: 30px;
    1005     padding-bottom: 30px;
    1006     margin-left: auto;
    1007     margin-right: auto;
    1008 }
    1009 
    1010862.site-header {
    1011     padding-top: 23px;
    1012     padding-bottom: 60px;
     863    padding-top: calc(0.75 * var(--global--spacing-vertical));
     864    padding-bottom: calc(2 * var(--global--spacing-vertical));
    1013865}
    1014866@media only screen and (min-width: 482px) {
    1015867
    1016868    .site-header {
    1017         padding-bottom: 90px;
     869        padding-bottom: calc(3 * var(--global--spacing-vertical));
    1018870    }
    1019871}
    … …  
    1024876 */
    1025877.site-main > * {
    1026     margin-top: 90px;
    1027     margin-bottom: 90px;
     878    margin-top: calc(3 * var(--global--spacing-vertical));
     879    margin-bottom: calc(3 * var(--global--spacing-vertical));
    1028880}
    1029881
    … …  
    1052904 * - Set margins
    1053905 */
    1054 .entry-header {
    1055     margin-top: 30px;
     906.entry-header,
     907.post-thumbnail,
     908.entry-content,
     909.entry-footer,
     910.author-bio {
     911    margin-top: var(--global--spacing-vertical);
    1056912    margin-right: auto;
    1057     margin-bottom: 30px;
    1058     margin-left: auto;
    1059 }
    1060 
    1061 .post-thumbnail {
    1062     margin-top: 30px;
    1063     margin-right: auto;
    1064     margin-bottom: 30px;
    1065     margin-left: auto;
    1066 }
    1067 
    1068 .entry-content {
    1069     margin-top: 30px;
    1070     margin-right: auto;
    1071     margin-bottom: 30px;
    1072     margin-left: auto;
    1073 }
    1074 
    1075 .entry-footer {
    1076     margin-top: 30px;
    1077     margin-right: auto;
    1078     margin-bottom: 30px;
    1079     margin-left: auto;
    1080 }
    1081 
    1082 .author-bio {
    1083     margin-top: 30px;
    1084     margin-right: auto;
    1085     margin-bottom: 30px;
     913    margin-bottom: var(--global--spacing-vertical);
    1086914    margin-left: auto;
    1087915}
    … …  
    1091919 * - Sets spacing-vertical margin logic
    1092920 */
    1093 .site-main > article > * {
    1094     margin-top: 20px;
    1095     margin-bottom: 20px;
    1096 }
    1097 
    1098 .site-main > .not-found > * {
    1099     margin-top: 20px;
    1100     margin-bottom: 20px;
    1101 }
    1102 
    1103 .entry-content > * {
    1104     margin-top: 20px;
    1105     margin-bottom: 20px;
    1106 }
    1107 
    1108 [class*=inner-container] > * {
    1109     margin-top: 20px;
    1110     margin-bottom: 20px;
    1111 }
    1112 
     921.site-main > article > *,
     922.site-main > .not-found > *,
     923.entry-content > *,
     924[class*=inner-container] > *,
    1113925.wp-block-template-part > * {
    1114     margin-top: 20px;
    1115     margin-bottom: 20px;
     926    margin-top: calc(0.666 * var(--global--spacing-vertical));
     927    margin-bottom: calc(0.666 * var(--global--spacing-vertical));
    1116928}
    1117929@media only screen and (min-width: 482px) {
    1118930
    1119     .site-main > article > * {
    1120         margin-top: 30px;
    1121         margin-bottom: 30px;
    1122     }
    1123 
    1124     .site-main > .not-found > * {
    1125         margin-top: 30px;
    1126         margin-bottom: 30px;
    1127     }
    1128 
    1129     .entry-content > * {
    1130         margin-top: 30px;
    1131         margin-bottom: 30px;
    1132     }
    1133 
    1134     [class*=inner-container] > * {
    1135         margin-top: 30px;
    1136         margin-bottom: 30px;
    1137     }
    1138 
     931    .site-main > article > *,
     932    .site-main > .not-found > *,
     933    .entry-content > *,
     934    [class*=inner-container] > *,
    1139935    .wp-block-template-part > * {
    1140         margin-top: 30px;
    1141         margin-bottom: 30px;
     936        margin-top: var(--global--spacing-vertical);
     937        margin-bottom: var(--global--spacing-vertical);
    1142938    }
    1143939}
    … …  
    1159955}
    1160956
    1161 .site-footer > * {
    1162     margin-top: 20px;
    1163     margin-bottom: 20px;
    1164 }
    1165 
     957.site-footer > *,
    1166958.widget-area > * {
    1167     margin-top: 20px;
    1168     margin-bottom: 20px;
     959    margin-top: calc(0.666 * var(--global--spacing-vertical));
     960    margin-bottom: calc(0.666 * var(--global--spacing-vertical));
    1169961}
    1170962@media only screen and (min-width: 482px) {
    1171963
    1172     .site-footer > * {
    1173         margin-top: 30px;
    1174         margin-bottom: 30px;
    1175     }
    1176 
     964    .site-footer > *,
    1177965    .widget-area > * {
    1178         margin-top: 30px;
    1179         margin-bottom: 30px;
     966        margin-top: var(--global--spacing-vertical);
     967        margin-bottom: var(--global--spacing-vertical);
    1180968    }
    1181969}
    … …  
    1185973 * - Sets spacing-unit margins
    1186974 */
    1187 .entry-header > * {
    1188     margin-top: 20px;
    1189     margin-bottom: 20px;
    1190 }
    1191 
    1192 .post-thumbnail > * {
    1193     margin-top: 20px;
    1194     margin-bottom: 20px;
    1195 }
    1196 
    1197 .page-content > * {
    1198     margin-top: 20px;
    1199     margin-bottom: 20px;
    1200 }
    1201 
    1202 .comment-content > * {
    1203     margin-top: 20px;
    1204     margin-bottom: 20px;
    1205 }
    1206 
     975.entry-header > *,
     976.post-thumbnail > *,
     977.page-content > *,
     978.comment-content > *,
    1207979.widget > * {
    1208     margin-top: 20px;
    1209     margin-bottom: 20px;
     980    margin-top: var(--global--spacing-unit);
     981    margin-bottom: var(--global--spacing-unit);
    1210982}
    1211983
    … …  
    12481020}
    12491021
    1250 .entry-content > *.alignfull + .alignleft {
    1251     margin-top: 30px;
    1252 }
    1253 
     1022.entry-content > *.alignfull + .alignleft,
    12541023.entry-content > *.alignfull + .alignright {
    1255     margin-top: 30px;
     1024    margin-top: var(--global--spacing-vertical);
    12561025}
    12571026
    … …  
    12981067    /* Apply border-box across the entire page. */
    12991068    box-sizing: border-box;
    1300     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1301     line-height: 1.7;
     1069    font-family: var(--global--font-secondary);
     1070    line-height: var(--global--line-height-body);
    13021071}
    13031072
    … …  
    13121081
    13131082body {
    1314     font-size: 1.25rem;
     1083    font-size: var(--global--font-size-base);
    13151084    font-weight: normal;
    1316     color: #28303d;
     1085    color: var(--global--color-primary);
    13171086    text-align: left;
    1318     background-color: #d1e4dd;
     1087    background-color: var(--global--color-background);
    13191088}
    13201089
    … …  
    13531122    padding: 0;
    13541123    position: relative;
    1355     margin: 30px 0 30px 25px;
     1124    margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
    13561125}
    13571126
    13581127blockquote > * {
    1359     margin-top: 20px;
    1360     margin-bottom: 20px;
     1128    margin-top: var(--global--spacing-unit);
     1129    margin-bottom: var(--global--spacing-unit);
    13611130}
    13621131
    … …  
    13701139
    13711140blockquote p {
    1372     letter-spacing: normal;
    1373     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1374     font-size: 1.25rem;
    1375     font-style: normal;
    1376     font-weight: 700;
    1377     line-height: 1.7;
    1378 }
    1379 
    1380 blockquote cite {
    1381     font-weight: normal;
    1382     color: #28303d;
    1383     font-size: 1rem;
    1384     letter-spacing: normal;
    1385 }
    1386 
     1141    letter-spacing: var(--heading--letter-spacing-h4);
     1142    font-family: var(--quote--font-family);
     1143    font-size: var(--quote--font-size);
     1144    font-style: var(--quote--font-style);
     1145    font-weight: var(--quote--font-weight);
     1146    line-height: var(--quote--line-height);
     1147}
     1148
     1149blockquote cite,
    13871150blockquote footer {
    13881151    font-weight: normal;
    1389     color: #28303d;
    1390     font-size: 1rem;
    1391     letter-spacing: normal;
     1152    color: var(--global--color-primary);
     1153    font-size: var(--global--font-size-xs);
     1154    letter-spacing: var(--global--letter-spacing);
    13921155}
    13931156
    … …  
    13971160}
    13981161
    1399 blockquote.alignleft p {
    1400     font-size: 1.125rem;
     1162blockquote.alignleft p,
     1163blockquote.alignright p {
     1164    font-size: var(--heading--font-size-h5);
    14011165    max-width: inherit;
    14021166    width: inherit;
    14031167}
    14041168
    1405 blockquote.alignright p {
    1406     font-size: 1.125rem;
    1407     max-width: inherit;
    1408     width: inherit;
    1409 }
    1410 
    1411 blockquote.alignleft cite {
    1412     font-size: 1rem;
    1413     letter-spacing: normal;
    1414 }
    1415 
    1416 blockquote.alignleft footer {
    1417     font-size: 1rem;
    1418     letter-spacing: normal;
    1419 }
    1420 
    1421 blockquote.alignright cite {
    1422     font-size: 1rem;
    1423     letter-spacing: normal;
    1424 }
    1425 
     1169blockquote.alignleft cite,
     1170blockquote.alignleft footer,
     1171blockquote.alignright cite,
    14261172blockquote.alignright footer {
    1427     font-size: 1rem;
    1428     letter-spacing: normal;
     1173    font-size: var(--global--font-size-xs);
     1174    letter-spacing: var(--global--letter-spacing);
    14291175}
    14301176
    14311177blockquote strong {
    1432     font-weight: bolder;
     1178    font-weight: var(--quote--font-weight-strong);
    14331179}
    14341180
    14351181blockquote:before {
    14361182    content: "“";
    1437     font-size: 1.25rem;
    1438     line-height: 1.7;
    1439 }
    1440 
    1441 blockquote .wp-block-quote__citation {
    1442     color: #28303d;
    1443     font-size: 1rem;
    1444     font-style: normal;
    1445 }
    1446 
    1447 blockquote cite {
    1448     color: #28303d;
    1449     font-size: 1rem;
    1450     font-style: normal;
    1451 }
    1452 
     1183    font-size: var(--quote--font-size);
     1184    line-height: var(--quote--line-height);
     1185    position: absolute;
     1186    left: calc(-0.5 * var(--global--spacing-horizontal));
     1187}
     1188
     1189blockquote .wp-block-quote__citation,
     1190blockquote cite,
    14531191blockquote footer {
    1454     color: #28303d;
    1455     font-size: 1rem;
    1456     font-style: normal;
     1192    color: var(--global--color-primary);
     1193    font-size: var(--global--font-size-xs);
     1194    font-style: var(--quote--font-style-cite);
    14571195}
    14581196@media only screen and (max-width: 481px) {
    14591197
    14601198    blockquote {
    1461         padding-left: 13px;
     1199        padding-left: calc(0.5 * var(--global--spacing-horizontal));
    14621200    }
    14631201
    … …  
    14671205}
    14681206
    1469 input[type=text] {
    1470     border: 3px solid #39414d;
    1471     border-radius: 0;
    1472     color: #28303d;
    1473     line-height: 1.7;
    1474     padding: 10px;
     1207input[type=text],
     1208input[type=email],
     1209input[type=url],
     1210input[type=password],
     1211input[type=search],
     1212input[type=number],
     1213input[type=tel],
     1214input[type=date],
     1215input[type=month],
     1216input[type=week],
     1217input[type=time],
     1218input[type=datetime],
     1219input[type=datetime-local],
     1220input[type=color],
     1221.site textarea {
     1222    border: var(--form--border-width) solid var(--form--border-color);
     1223    border-radius: var(--form--border-radius);
     1224    color: var(--form--color-text);
     1225    line-height: var(--global--line-height-body);
     1226    padding: var(--form--spacing-unit);
    14751227    margin: 0 2px;
    14761228}
    14771229
    1478 input[type=email] {
    1479     border: 3px solid #39414d;
    1480     border-radius: 0;
    1481     color: #28303d;
    1482     line-height: 1.7;
    1483     padding: 10px;
    1484     margin: 0 2px;
    1485 }
    1486 
    1487 input[type=url] {
    1488     border: 3px solid #39414d;
    1489     border-radius: 0;
    1490     color: #28303d;
    1491     line-height: 1.7;
    1492     padding: 10px;
    1493     margin: 0 2px;
    1494 }
    1495 
    1496 input[type=password] {
    1497     border: 3px solid #39414d;
    1498     border-radius: 0;
    1499     color: #28303d;
    1500     line-height: 1.7;
    1501     padding: 10px;
    1502     margin: 0 2px;
    1503 }
    1504 
    1505 input[type=search] {
    1506     border: 3px solid #39414d;
    1507     border-radius: 0;
    1508     color: #28303d;
    1509     line-height: 1.7;
    1510     padding: 10px;
    1511     margin: 0 2px;
    1512 }
    1513 
    1514 input[type=number] {
    1515     border: 3px solid #39414d;
    1516     border-radius: 0;
    1517     color: #28303d;
    1518     line-height: 1.7;
    1519     padding: 10px;
    1520     margin: 0 2px;
    1521 }
    1522 
    1523 input[type=tel] {
    1524     border: 3px solid #39414d;
    1525     border-radius: 0;
    1526     color: #28303d;
    1527     line-height: 1.7;
    1528     padding: 10px;
    1529     margin: 0 2px;
    1530 }
    1531 
    1532 input[type=date] {
    1533     border: 3px solid #39414d;
    1534     border-radius: 0;
    1535     color: #28303d;
    1536     line-height: 1.7;
    1537     padding: 10px;
    1538     margin: 0 2px;
    1539 }
    1540 
    1541 input[type=month] {
    1542     border: 3px solid #39414d;
    1543     border-radius: 0;
    1544     color: #28303d;
    1545     line-height: 1.7;
    1546     padding: 10px;
    1547     margin: 0 2px;
    1548 }
    1549 
    1550 input[type=week] {
    1551     border: 3px solid #39414d;
    1552     border-radius: 0;
    1553     color: #28303d;
    1554     line-height: 1.7;
    1555     padding: 10px;
    1556     margin: 0 2px;
    1557 }
    1558 
    1559 input[type=time] {
    1560     border: 3px solid #39414d;
    1561     border-radius: 0;
    1562     color: #28303d;
    1563     line-height: 1.7;
    1564     padding: 10px;
    1565     margin: 0 2px;
    1566 }
    1567 
    1568 input[type=datetime] {
    1569     border: 3px solid #39414d;
    1570     border-radius: 0;
    1571     color: #28303d;
    1572     line-height: 1.7;
    1573     padding: 10px;
    1574     margin: 0 2px;
    1575 }
    1576 
    1577 input[type=datetime-local] {
    1578     border: 3px solid #39414d;
    1579     border-radius: 0;
    1580     color: #28303d;
    1581     line-height: 1.7;
    1582     padding: 10px;
    1583     margin: 0 2px;
    1584 }
    1585 
    1586 input[type=color] {
    1587     border: 3px solid #39414d;
    1588     border-radius: 0;
    1589     color: #28303d;
    1590     line-height: 1.7;
    1591     padding: 10px;
    1592     margin: 0 2px;
    1593 }
    1594 
    1595 .site textarea {
    1596     border: 3px solid #39414d;
    1597     border-radius: 0;
    1598     color: #28303d;
    1599     line-height: 1.7;
    1600     padding: 10px;
    1601     margin: 0 2px;
    1602 }
    1603 
    1604 input[type=text]:focus {
    1605     color: #28303d;
     1230input[type=text]:focus,
     1231input[type=email]:focus,
     1232input[type=url]:focus,
     1233input[type=password]:focus,
     1234input[type=search]:focus,
     1235input[type=number]:focus,
     1236input[type=tel]:focus,
     1237input[type=date]:focus,
     1238input[type=month]:focus,
     1239input[type=week]:focus,
     1240input[type=time]:focus,
     1241input[type=datetime]:focus,
     1242input[type=datetime-local]:focus,
     1243input[type=color]:focus,
     1244.site textarea:focus {
     1245    color: var(--form--color-text);
    16061246    outline-offset: 2px;
    1607     outline: 2px dotted #39414d;
    1608 }
    1609 
    1610 input[type=email]:focus {
    1611     color: #28303d;
    1612     outline-offset: 2px;
    1613     outline: 2px dotted #39414d;
    1614 }
    1615 
    1616 input[type=url]:focus {
    1617     color: #28303d;
    1618     outline-offset: 2px;
    1619     outline: 2px dotted #39414d;
    1620 }
    1621 
    1622 input[type=password]:focus {
    1623     color: #28303d;
    1624     outline-offset: 2px;
    1625     outline: 2px dotted #39414d;
    1626 }
    1627 
    1628 input[type=search]:focus {
    1629     color: #28303d;
    1630     outline-offset: 2px;
    1631     outline: 2px dotted #39414d;
    1632 }
    1633 
    1634 input[type=number]:focus {
    1635     color: #28303d;
    1636     outline-offset: 2px;
    1637     outline: 2px dotted #39414d;
    1638 }
    1639 
    1640 input[type=tel]:focus {
    1641     color: #28303d;
    1642     outline-offset: 2px;
    1643     outline: 2px dotted #39414d;
    1644 }
    1645 
    1646 input[type=date]:focus {
    1647     color: #28303d;
    1648     outline-offset: 2px;
    1649     outline: 2px dotted #39414d;
    1650 }
    1651 
    1652 input[type=month]:focus {
    1653     color: #28303d;
    1654     outline-offset: 2px;
    1655     outline: 2px dotted #39414d;
    1656 }
    1657 
    1658 input[type=week]:focus {
    1659     color: #28303d;
    1660     outline-offset: 2px;
    1661     outline: 2px dotted #39414d;
    1662 }
    1663 
    1664 input[type=time]:focus {
    1665     color: #28303d;
    1666     outline-offset: 2px;
    1667     outline: 2px dotted #39414d;
    1668 }
    1669 
    1670 input[type=datetime]:focus {
    1671     color: #28303d;
    1672     outline-offset: 2px;
    1673     outline: 2px dotted #39414d;
    1674 }
    1675 
    1676 input[type=datetime-local]:focus {
    1677     color: #28303d;
    1678     outline-offset: 2px;
    1679     outline: 2px dotted #39414d;
    1680 }
    1681 
    1682 input[type=color]:focus {
    1683     color: #28303d;
    1684     outline-offset: 2px;
    1685     outline: 2px dotted #39414d;
    1686 }
    1687 
    1688 .site textarea:focus {
    1689     color: #28303d;
    1690     outline-offset: 2px;
    1691     outline: 2px dotted #39414d;
     1247    outline: 2px dotted var(--form--border-color);
    16921248}
    16931249
    … …  
    17101266}
    17111267
    1712 .is-dark-theme input[type=text] {
    1713     background: rgba(255, 255, 255, 0.9);
    1714 }
    1715 
    1716 .is-dark-theme input[type=email] {
    1717     background: rgba(255, 255, 255, 0.9);
    1718 }
    1719 
    1720 .is-dark-theme input[type=url] {
    1721     background: rgba(255, 255, 255, 0.9);
    1722 }
    1723 
    1724 .is-dark-theme input[type=password] {
    1725     background: rgba(255, 255, 255, 0.9);
    1726 }
    1727 
    1728 .is-dark-theme input[type=search] {
    1729     background: rgba(255, 255, 255, 0.9);
    1730 }
    1731 
    1732 .is-dark-theme input[type=number] {
    1733     background: rgba(255, 255, 255, 0.9);
    1734 }
    1735 
    1736 .is-dark-theme input[type=tel] {
    1737     background: rgba(255, 255, 255, 0.9);
    1738 }
    1739 
    1740 .is-dark-theme input[type=date] {
    1741     background: rgba(255, 255, 255, 0.9);
    1742 }
    1743 
    1744 .is-dark-theme input[type=month] {
    1745     background: rgba(255, 255, 255, 0.9);
    1746 }
    1747 
    1748 .is-dark-theme input[type=week] {
    1749     background: rgba(255, 255, 255, 0.9);
    1750 }
    1751 
    1752 .is-dark-theme input[type=time] {
    1753     background: rgba(255, 255, 255, 0.9);
    1754 }
    1755 
    1756 .is-dark-theme input[type=datetime] {
    1757     background: rgba(255, 255, 255, 0.9);
    1758 }
    1759 
    1760 .is-dark-theme input[type=datetime-local] {
    1761     background: rgba(255, 255, 255, 0.9);
    1762 }
    1763 
    1764 .is-dark-theme input[type=color] {
    1765     background: rgba(255, 255, 255, 0.9);
    1766 }
    1767 
     1268.is-dark-theme input[type=text],
     1269.is-dark-theme input[type=email],
     1270.is-dark-theme input[type=url],
     1271.is-dark-theme input[type=password],
     1272.is-dark-theme input[type=search],
     1273.is-dark-theme input[type=number],
     1274.is-dark-theme input[type=tel],
     1275.is-dark-theme input[type=date],
     1276.is-dark-theme input[type=month],
     1277.is-dark-theme input[type=week],
     1278.is-dark-theme input[type=time],
     1279.is-dark-theme input[type=datetime],
     1280.is-dark-theme input[type=datetime-local],
     1281.is-dark-theme input[type=color],
    17681282.is-dark-theme .site textarea {
    1769     background: rgba(255, 255, 255, 0.9);
     1283    background: var(--global--color-white-90);
    17701284}
    17711285
    … …  
    17751289
    17761290.is-dark-theme input[type=search]:focus {
    1777     outline-color: #d1e4dd;
     1291    outline-color: var(--global--color-background);
    17781292}
    17791293
    17801294input[type=color] {
    1781     padding: 5px;
    1782     height: 40px;
     1295    padding: calc(var(--form--spacing-unit) / 2);
     1296    height: calc(4 * var(--form--spacing-unit));
    17831297}
    17841298
    … …  
    17911305
    17921306select {
    1793     border: 3px solid #39414d;
    1794     color: #28303d;
     1307    border: var(--form--border-width) solid var(--form--border-color);
     1308    color: var(--form--color-text);
    17951309    -moz-appearance: none;
    17961310    -webkit-appearance: none;
    17971311    appearance: none;
    1798     line-height: 1.7;
    1799     padding: 10px 30px 10px 10px;
    1800     background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
    1801     background-position: right 10px top 60%;
     1312    line-height: var(--global--line-height-body);
     1313    padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
     1314    background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
     1315    background-position: right var(--form--spacing-unit) top 60%;
    18021316}
    18031317
    18041318select:focus {
    18051319    outline-offset: 2px;
    1806     outline: 2px dotted #39414d;
     1320    outline: 2px dotted var(--form--border-color);
    18071321}
    18081322
    18091323.is-dark-theme select {
    1810     background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
    1811     background-position: right 10px top 60%;
     1324    background: var(--global--color-white-90) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
     1325    background-position: right var(--form--spacing-unit) top 60%;
    18121326}
    18131327
    … …  
    18171331
    18181332label {
    1819     font-size: 1.125rem;
    1820     font-weight: 500;
    1821     margin-bottom: 10px;
     1333    font-size: var(--form--font-size);
     1334    font-weight: var(--form--label-weight);
     1335    margin-bottom: calc(var(--global--spacing-vertical) / 3);
    18221336}
    18231337
    … …  
    18291343@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    18301344
    1831     input[type=checkbox] {
    1832         -webkit-appearance: none;
    1833         -moz-appearance: none;
    1834         position: relative;
    1835         width: 25px;
    1836         height: 25px;
    1837         border: 3px solid #39414d;
    1838         background: #fff;
    1839     }
    1840 
     1345    input[type=checkbox],
    18411346    input[type=radio] {
    18421347        -webkit-appearance: none;
    … …  
    18451350        width: 25px;
    18461351        height: 25px;
    1847         border: 3px solid #39414d;
    1848         background: #fff;
     1352        border: var(--form--border-width) solid var(--form--border-color);
     1353        background: var(--global--color-white);
    18491354    }
    18501355
    … …  
    18541359    }
    18551360
    1856     .is-dark-theme input[type=checkbox] {
    1857         background: rgba(255, 255, 255, 0.9);
    1858     }
    1859 
     1361    .is-dark-theme input[type=checkbox],
    18601362    .is-dark-theme input[type=radio] {
    1861         background: rgba(255, 255, 255, 0.9);
     1363        background: var(--global--color-white-90);
    18621364    }
    18631365
    18641366    input[type=checkbox]:focus {
    18651367        outline-offset: 2px;
    1866         outline: 2px dotted #39414d;
     1368        outline: 2px dotted var(--form--border-color);
    18671369    }
    18681370
    … …  
    18761378        width: 7px;
    18771379        height: 13px;
    1878         border: 3px solid #28303d;
     1380        border: 3px solid var(--form--color-text);
    18791381        border-top: 0;
    18801382        border-left: 0;