:root {
    /* General */
    --body-bg: var(--gray-100);
    --font-size: calc(14rem/16);
    --text-color: var(--gray-700);
    --light-text-color: var(--gray-550);
    --link-color: #2563eb;
    --focus-ring-color: #0284c7;

    /* Header */
    --header-height: calc(44rem/16);
    --header-padding: 0 calc(10rem/16);
    --header-border: 1px solid var(--hairline-color);
    --header-bg: none;

    /* Panes */
    --pane-border: none;
    --pane-border-radius: var(--large-border-radius);
    --pane-padding: var(--xl);
    --pane-bg: var(--white);
    --pane-shadow: 0 0 0 1px var(--gray-200), 0 2px 12px hsl(from var(--gray-200) h s l / 50%);

    /* Secondary panes */
    --secondary-pane-border: var(--pane-border);
    --secondary-pane-border-radius: var(--pane-border-radius);
    --secondary-pane-bg: var(--gray-050);
    --secondary-pane-shadow: var(--pane-shadow);

    /* Modals */
    --modal-border: var(--pane-border);
    --modal-border-radius: var(--pane-border-radius);
    --modal-padding: var(--l);
    --modal-bg: var(--pane-bg);
    --modal-shadow: 0 0 0 1px hsl(from var(--gray-400) h s l / 25%),
        0 25px 100px hsl(from var(--gray-900) h s l / 50%);

    --login-modal-bg: var(--gray-100);
    --shade-bg: hsl(from var(--gray-900) h s l / 50%);

    /* Slideout footer */
    --slideout-footer-border: none;
    --slideout-footer-bg: var(--gray-050);
    --slideout-footer-shadow: var(--pane-shadow);

    /* Inputs */
    --input-border: 1px solid hsl(212 25% 50% / 40%);
    --input-border-radius: var(--small-border-radius);
    --input-height: var(--ui-control-height);
    --input-bg: hsl(212, 50%, 99%);

    --checkbox-size: 1rem;
    --radio-size: 1rem;

    /* Buttons */
    --button-border: none;
    --button-border-radius: var(--ui-control-border-radius);
    --button-padding: 10px;
    --button-text-color: var(--text-color);
    --button-bg: var(--ui-control-bg-color);

    --button-border--hover: var(--button-border);
    --button-bg--hover: var(--ui-control-hover-bg-color);

    --button-border--active: var(--button-border);
    --button-bg--active: var(--ui-control-active-bg-color);

    /* Primary buttons */
    --primary-button-border: var(--button-border);
    --primary-button-text-color: var(--white);
    --primary-button-bg: var(--red-600);

    --primary-button-border--hover: var(--button-border--hover);
    --primary-button-bg--hover: var(--red-700);

    --primary-button-border--active: var(--button-border--active);
    --primary-button-bg--active: var(--red-800);

    /* Secondary buttons */
    --secondary-button-border: var(--button-border);
    --secondary-button-text-color: var(--white);
    --secondary-button-bg: var(--gray-500);]

    --secondary-button-border--hover: var(--button-border--hover);
    --secondary-button-bg--hover: var(--gray-550);

    --secondary-button-border--active: var(--button-border--active);
    --secondary-button-bg--active: var(--gray-600);

    /* Horizontal rules */
    --hr-margin: var(--pane-padding);
    --hr-border: 1px solid var(--hairline-color);
}

@media screen and (min-width: 1024px) {
  :root {
    --modal-padding: var(--xl);
  }
}