/*** COLOR VARS ***/
 :root {
    /********* PRIMITIVES *********/
     --em-color-blue-020: #007dba;
     --em-color-blue-060: #012169;
     --em-color-black: #101820;
     --em-color-white: #ffffff;
    /********* SEMANTICS *********/
     --em-color-fg-base: var(--em-color-black);
     --em-color-bg-base: var(--em-color-white);
     --em-color-fg-primary: var(--em-color-blue-060);
     --em-color-bg-primary: var(--em-color-blue-060);
     --em-color-bg-secondary: var(--em-color-blue-020);
     --em-color-focus-indicator: var(--em-color-blue-020);
    /********* INVERTED *********/
     .drk-background {
         --em-color-fg-base: var(--em-color-white);
    }
}
/*** SPACE AND SIZE VARS ***/
 :root {
    /*** Border Radius ***/
     --em-size-radius-extra-sm: 2px;
     --em-size-radius-sm: 4px;
     --em-size-radius-med: 6px;
     --em-size-radius-lrg: 8px;
    /*** Focus Indicator ***/
     --em-size-thickness-focus-indicator: 2px;
     --em-size-gap-focus-indicator: 2px;
    /*** Size - Component - title ***/
     --size-title-marker-vert: 10px;
}