:root {

    /* Colors */
    --color-primary: #f90;
    --color-secondary: #2b6ea2;
    --color-dark-blue: #036;
    --color-white: #fff;
    --color-black: #000;
    --color-gray: #768187;
    --color-biogas: #60b11f;
    --color-success: #4caf50;
    --color-error: #d32f2f;
    --color-border-active: #fff;
    --color-label-muted: #cfd6da;

    /* Typography */
    --font-weight-bold: 700;
    --font-weight-regular: 400;
    --font-size-3xl: 50px;
    --font-size-2xl: 40px;
    --font-size-lg: 24px;
    --font-size-base: 20px;
    --font-size-md: 18px;
    --font-size-sm: 16px;
    --font-size-xs: 13px;
    --line-height-base: 24px;
    --line-height-md: 26px;

    /* Border */
    --border-radius-sm: 3px;
    --border-radius-lg: 60px;
    --border-radius-full: 50%;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 9px;
    --spacing-md: 14px;
    --spacing-lg: 18px;
    --spacing-xl: 27px;
    --spacing-2xl: 48px;
    --spacing-3xl: 65px;
    --spacing-4xl: 85px;

    /* Transitions */
    --transition-fast: .15s cubic-bezier(.4, 0, .2, 1);
    --transition-base: .3s ease-in-out;
    --transition-slow: .5s;

    /* Shadows */
    --shadow-sm: 0 1.5px 3px rgba(40, 41, 61, .04), 0 6px 12px rgba(96, 97, 112, .16);
    --shadow-md: 0 2px 8px rgba(40, 41, 61, .08), 0 20px 32px rgba(96, 97, 112, .24);

    /* Generic input validation */
    --text-input-error-background: var(--color-error);
    --text-input-error-color: var(--color-white);
    --text-input-error-font-size: var(--font-size-xs);
    --text-input-error-padding-vertical: var(--spacing-xs);
    --text-input-error-padding-horizontal: var(--spacing-sm);
    --text-input-error-border-radius: var(--border-radius-sm);
    --text-input-error-arrow-size: 8px;
}