: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-color: #cbd5e1;

--input-border: 1px solid var(--input-border-color);

--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);

}