:root {
    /* General */
    --body-bg: #ffffff;
    --font-size: inherit;
    --text-color: #1e293b;
    --light-text-color: #475569;
    --link-color: #2563eb;
    --focus-ring-color: #0284c7;

    /* Header */
    --header-height: calc(56rem / 16);
    --header-padding: 1.5rem;
    --header-border: none;
    --header-bg: #f8fafc;

    /* Panes */
    --pane-border: 1px solid #cbd5e1;
    --pane-border-radius: 0.25rem;
    --pane-padding: 1.75rem;
    --pane-bg: #ffffff;
    --pane-shadow: 0 2px 4px rgb(0 0 0 / 5%);

    /* Secondary panes */
    --secondary-pane-border: 1px solid #e2e8f0;
    --secondary-pane-border-radius: var(--pane-border-radius);
    --secondary-pane-bg: transparent;
    --secondary-pane-shadow: none;

    /* Modals */
    --modal-border: var(--pane-border);
    --modal-border-radius: var(--pane-border-radius);
    --modal-padding: var(--pane-padding);
    --modal-bg: var(--pane-bg);
    --modal-shadow: 0 4px 8px rgb(0 0 0 / 10%);

    --login-modal-bg: var(--modal-bg);
    --shade-bg: rgb(0 0 0 / 25%);

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

    /* Inputs */
    --input-border: 1px solid #cbd5e1;
    --input-border-radius: 0.25rem;
    --input-height: 2.25rem;
    --input-bg: #f8fafc;

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

    /* Buttons */
    --button-border: 1px solid #3b82f6;
    --button-border-radius: 0.25rem;
    --button-padding: 0.5rem;
    --button-text-color: var(--text-color);
    --button-bg: transparent;
    --button-shadow: none;

    --button-border--hover: 1px solid #2563eb;
    --button-bg--hover: var(--button-bg);
    --button-shadow--hover: var(--button-shadow);

    --button-border--active: 1px solid #1d4ed8;
    --button-bg--active: var(--button-bg);
    --button-shadow--active: var(--button-shadow);

    /* Primary buttons */
    --primary-button-border: none;
    --primary-button-text-color: #ffffff;
    --primary-button-bg: #2563eb;
    --primary-button-shadow: var(--button-shadow);

    --primary-button-border--hover: var(--primary-button-border);
    --primary-button-bg--hover: #1d4ed8;
    --primary-button-shadow--hover: var(--primary-button-shadow);

    --primary-button-border--active: var(--primary-button-border);
    --primary-button-bg--active: #1e40af;
    --primary-button-shadow--active: var(--primary-button-shadow);

    /* Secondary buttons */
    --secondary-button-border: var(--button-border);
    --secondary-button-text-color: var(--button-text-color);
    --secondary-button-bg: var(--button-bg);
    --secondary-button-shadow: var(--button-shadow);

    --secondary-button-border--hover: var(--secondary-button-border);
    --secondary-button-bg--hover: var(--secondary-button-bg);
    --secondary-button-shadow--hover: var(--secondary-button-shadow);

    --secondary-button-border--active: var(--secondary-button-border);
    --secondary-button-bg--active: var(--secondary-button-bg);
    --secondary-button-shadow--active: var(--secondary-button-shadow);

    /* Horizontal rules */
    --hr-margin: var(--pane-padding);
    --hr-border: var(--secondary-pane-border);
}