:root {
    /* Color palette */
    --color-primary: #FF9F1C;
    --color-primary-dark: #E08A15; /* Темнее оранжевый для hover/active */
    --color-secondary: #008CFF;
    --color-dark-blue: rgb(0,5,20);
    --color-white: #FFFFFF;
    --color-gray-100: rgba(255, 255, 255, 0.04);
    --color-gray-200: rgba(255, 255, 255, 0.16);
    --color-gray-300: rgba(255, 255, 255, 0.25);
    --color-gray-solid: rgba(64,68,79,0.75);
    --color-dropdown-menu: rgba(90, 100, 120, 0.9);
    /* №73b: the same colour without transparency, for the ⋮ menus of report cards and of the archive */
    --color-dropdown-menu-solid: #545E71;
    --color-stroke: rgba(255, 255, 255, 0.25);
    --color-error: #FF0000;
    --color-success: #29C10B;
    /* Status colors */
    --color-status-inprogress: #FFB107;
    --color-status-draft: #A0A0A0;
    --color-status-ready-to-sign: #3B82F6;
    --color-status-sent: #8B5CF6;
    --color-status-signed: rgb(41, 193, 11, 0.5961);
    --color-status-invoice: #F59E0B;
    --color-status-canceled: #EF4444;
    /* Role colors*/
    --color-role-admin: #1D7C0D;
    --color-role-sysadmin: rgba(0, 0, 0, 0.27);
    --color-role-subcontractor: #6F34FB;
    --color-role-technician: #0C5BBA;
    /* Gradients */
    --gradient-blue: linear-gradient(90.29deg, #6ABCFF -40.06%, #008CFF 12.13%, #0076D7 23.24%, #008CFF 38.78%, #6ABCFF 56.55%, #13E5EB 70.99%);
    /* №77: soft glows at the screen edges (.ellipse_*, .ds-effect-*) - the look of the former blur(300px) of
       --gradient-blue and of the stage green, drawn by gradients only (no filter, cheap for iPhone Safari) */
    --glow-blue:
        radial-gradient(935px 935px at calc(50% + 175px) 50%, rgba(43, 245, 232, 0.135) 0%, rgba(43, 245, 232, 0.119) 16.7%, rgba(43, 245, 232, 0.082) 33.3%, rgba(43, 245, 232, 0.044) 50%, rgba(43, 245, 232, 0.018) 66.7%, rgba(43, 245, 232, 0.006) 83.3%, rgba(43, 245, 232, 0) 100%),
        radial-gradient(990px 940px at calc(50% - 90px) 50%, rgba(15, 134, 244, 0.24) 0%, rgba(15, 134, 244, 0.212) 16.7%, rgba(15, 134, 244, 0.146) 33.3%, rgba(15, 134, 244, 0.078) 50%, rgba(15, 134, 244, 0.032) 66.7%, rgba(15, 134, 244, 0.011) 83.3%, rgba(15, 134, 244, 0) 100%);
    --glow-green:
        radial-gradient(935px 935px at calc(50% + 230px) 50%, rgba(45, 219, 67, 0.085) 0%, rgba(45, 219, 67, 0.075) 16.7%, rgba(45, 219, 67, 0.052) 33.3%, rgba(45, 219, 67, 0.028) 50%, rgba(45, 219, 67, 0.012) 66.7%, rgba(45, 219, 67, 0.004) 83.3%, rgba(45, 219, 67, 0) 100%),
        radial-gradient(990px 940px at calc(50% - 90px) 50%, rgba(0, 135, 0, 0.24) 0%, rgba(0, 135, 0, 0.212) 16.7%, rgba(0, 135, 0, 0.146) 33.3%, rgba(0, 135, 0, 0.078) 50%, rgba(0, 135, 0, 0.032) 66.7%, rgba(0, 135, 0, 0.011) 83.3%, rgba(0, 135, 0, 0) 100%);
    /* Component borders */
    --border-default: rgba(0, 0, 0, 0.23);
    --border-hover: rgba(0, 0, 0, 0.50);
    --border-focused: rgba(0, 0, 0, 0.50);
    /* Component borders dark theme */
    --border-default-dark: rgba(255, 255, 255, 0.23);
    --border-hover-dark: rgba(255, 255, 255, 0.50);
    --border-focused-dark: rgba(255, 255, 255, 0.50);
    /* Component background in active state */
    --background-focused: rgba(255, 255, 255, 1.0);
    --background-focused-dark: rgba(255, 255, 255, 0.15);
    /* Label color in active state */
    --label-focused: rgba(0, 0, 0, 0.87);
    --label-focused-dark: rgba(255, 255, 255, 1.0);
    /* Shadows */
    --shadow-default: 0px 4px 10px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px #DAD4F4;
    --shadow-popup: 4px 4px 15px rgba(0, 0, 0, 0.12), inset -8px 8px 15px rgba(255, 255, 255, 0.04);
    --shadow-card: 0px 4px 24px rgba(0, 0, 0, 0.32);
    /* Sizes and spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    --spacing-5xl: 100px;
    /* Layout widths */
    --width-main-container: 402px;
    --width-content-container: 370px;
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 30px;
    --radius-pill: 32px;
    /* Typography */
    --font-family-primary: 'Poppins', 'Noto Sans Hebrew', sans-serif;
    --font-family-secondary: 'Manrope', 'Noto Sans Hebrew', sans-serif;
    --font-family-tertiary: 'Montserrat', 'Noto Sans Hebrew', sans-serif;
    /* Font sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-xxl: 28px;
    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    /* Z-indexes */
    --z-index-dropdown: 1000;
    --z-index-overlay: 1010;
    --z-index-modal: 1050;
    --z-index-modal-backdrop: 1040;
    /* Effects */
    --blur-effect-xs: blur(12px);
    --blur-effect-s: blur(24px);
    --blur-effect-m: blur(32px);
    --blur-effect-l: blur(64px);
    --blur-effect-xl: blur(100px);
    --blur-effect-xxl: blur(150px);
    --blur-effect-xxxl: blur(300px);
    /* Opacity */
    --opacity-light: 0.6;
    --opacity-medium: 0.8;
    --opacity-full: 1;
    /* Animations */
    --transition-default: all 0.3s ease;
    /* Input label states */
    --ds-input-label-default: rgba(0, 0, 0, 0.6);
    --ds-input-label-active: var(--label-focused);
    --ds-input-label-error: var(--color-error);
}

/* П-104: no grey text on a dark page - labels inside empty fields are light too */
.ds-page--dark {
    --ds-input-label-default: rgba(255, 255, 255, 0.9);
    --ds-input-label-active: var(--label-focused-dark);
}

/* №95: depth of the "glass" tiles, cards and buttons (variant B: highlight on top, shade below) and their pressed
   state - only on the dark pages. Every rule that uses them falls back to the former flat look when they are not set:
   outside the dark pages and in the ?fx=nodepth mode (fxSwitch.js unsets them). Shadows are never animated and none
   is blurred more than 20px (П-118, №77) */
.ds-page--dark,
.home_page.dark {
    --surface-raised-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(0, 0, 0, 0.18) 100%);
    --surface-raised-border: rgba(255, 255, 255, 0.22);
    --shadow-raised: 0 10px 20px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.40), inset 0 2px 0 rgba(255, 255, 255, 0.30), inset 0 -3px 6px rgba(0, 0, 0, 0.30);
    --surface-pressed-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.30) 100%);
    --shadow-pressed: 0 1px 2px rgba(0, 0, 0, 0.40), inset 0 3px 8px rgba(0, 0, 0, 0.55);
    --shadow-pressed-inner: inset 0 3px 8px rgba(0, 0, 0, 0.55);
    --press-transform: translateY(3px) scale(0.97);
}