:root {

/* Colors */

--color-background-light: #FFFFFF;
--color-background-dark: #000000;
--color-surface: #F7F7F7;

--color-text: #111111;
--color-text-light: #FFFFFF;
--color-text-mid: #cfcfcf;
--color-text-mid-dark:#898989;

--color-brand:#e93f32;
--color-black:#000000;


--color-border: #E8E8E8;
--color-overlay: rgba 0,0,0,.45;

/* Typography */

--font-family: "Archivo", sans-serif;
--font-regular: 400;
--font-bold: 600;

/* Layout */

--container-width: 1100px;
--container-padding: 40px;

/* Spacing */

--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;

--space-block: 96px;
--space-section: 144px;
--space-section-lg: 192px;
--space-card: ;
--space-inline: ;

/* Radius */

--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;

/* Borders */

--border-width: 1px;
--border-color: var(--color-border);

/* Motion */

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 500ms;

--ease-standard: cubic-bezier(.2,.8,.2,1);
--ease-emphasis: cubic-bezier(.16,1,.3,1);


/* Z-index */

--z-base: 1;
--z-dropdown: 100;
--z-header: 200;
--z-overlay: 300;
--z-modal: 400;
z-index:999999;

}