:root { /* ============================================================ * 1. PRIMITIVE COLORS * ============================================================ */ /* — Brand: Blue Sky — */ --blue-sky-950: #080929; --blue-sky-900: #0A1F44; --blue-sky-800: #102E6B; --blue-sky-700: #00357E; --blue-sky-600: #0058D2; --blue-sky-500: #2E74E8; --blue-sky-400: #5B96F0; --blue-sky-300: #85B7F5; --blue-sky-200: #B5D4F9; --blue-sky-150: #D0E6FB; --blue-sky-100: #E8F0FB; --blue-sky-50: #F1F7FF; /* — Brand: Lavender — */ --lavender-900: #1A0F5C; --lavender-800: #2A1A85; --lavender-700: #3D28B0; --lavender-600: #5140D4; --lavender-500: #7060E0; --lavender-400: #9585E8; --lavender-300: #B8AFEF; --lavender-200: #D4CFF6; --lavender-100: #EEEDFB; /* — Brand: Purple — */ --purple-900: #2D0A5C; --purple-800: #4A1285; --purple-700: #6A1FB0; --purple-600: #8B30D4; --purple-500: #A855E0; --purple-400: #C285E8; --purple-300: #D9AFEF; --purple-200: #EBD4F6; --purple-100: #F7EEFB; /* — Brand: Magenta — */ --magenta-900: #4A0A30; --magenta-800: #7A1050; --magenta-700: #A81B72; --magenta-600: #CC2990; --magenta-500: #E050AA; --magenta-400: #EA80C3; --magenta-300: #F2AEDA; --magenta-200: #F8D4ED; --magenta-100: #FCEEF7; /* — Brand: Forest Green — */ --forest-green-900: #052A20; --forest-green-800: #0A4535; --forest-green-700: #115E4A; --forest-green-600: #1A7A60; --forest-green-500: #249970; --forest-green-450: #40B896; --forest-green-300: #80D4B8; --forest-green-200: #B5E8D8; --forest-green-150: #D5F2EA; --forest-green-100: #EAF9F4; /* — Base: Gray — */ --gray-900: #121212; --gray-800: #222222; --gray-700: #383838; --gray-600: #555555; --gray-500: #717171; --gray-400: #8F8F8F; --gray-300: #ADADAD; --gray-250: #C4C4C4; --gray-200: #D9D9D9; --gray-100: #F1F1F1; --gray-120: #F5F5F5; --gray-130: #FAFAFA; --black: #000000; --white: #FFFFFF; /* — Alpha: Black — */ --black-500-alpha: rgba(0, 0, 0, 0.50); --black-400-alpha: rgba(0, 0, 0, 0.36); --black-300-alpha: rgba(0, 0, 0, 0.24); --black-200-alpha: rgba(0, 0, 0, 0.12); --black-100-alpha: rgba(0, 0, 0, 0.06); /* — Alpha: White — */ --white-500-alpha: rgba(255, 255, 255, 0.50); --white-400-alpha: rgba(255, 255, 255, 0.36); --white-300-alpha: rgba(255, 255, 255, 0.24); --white-200-alpha: rgba(255, 255, 255, 0.12); --white-100-alpha: rgba(255, 255, 255, 0.06); /* — Alpha: Gray — */ --gray-500-alpha: rgba(100, 100, 100, 0.50); --gray-400-alpha: rgba(100, 100, 100, 0.36); --gray-300-alpha: rgba(100, 100, 100, 0.24); --gray-200-alpha: rgba(100, 100, 100, 0.12); --gray-100-alpha: rgba(100, 100, 100, 0.06); /* — Status: Green — */ --green-900: #0A3D1F; --green-800: #145C2E; --green-700: #1E7A3D; --green-600: #28A050; --green-500: #3DBD68; --green-400: #6DD48A; --green-300: #9DE5B2; --green-200: #C3F0D0; --green-100: #E0F8E8; --green-50: #F2FDF5; /* — Status: Apricot (Warning/Orange) — */ --apricot-900: #4A1A00; --apricot-800: #7A2E00; --apricot-700: #A84500; --apricot-600: #D46000; --apricot-500: #F07800; --apricot-400: #F5A030; --apricot-300: #F9C870; --apricot-200: #FCE0A8; --apricot-100: #FEF0D4; --apricot-50: #FFF8EC; /* — Status: Red (Danger) — */ --red-900: #4A0A0A; --red-800: #7A1010; --red-700: #A81818; --red-600: #D42020; --red-500: #E84040; --red-400: #EF7070; --red-300: #F5A0A0; --red-200: #FAC8C8; --red-100: #FCE4E4; --red-50: #FEF2F2; /* ============================================================ * 2. SEMANTIC COLORS * ============================================================ * Ссылаются на primitive — легко менять тему целиком */ /* — Background: Base — */ --color-bg-primary: var(--white); --color-bg-secondary: var(--gray-100); --color-bg-tertiary: var(--gray-200); --color-bg-inverse: var(--gray-900); --color-bg-inverse-secondary: var(--gray-800); --color-bg-overlay: var(--black-500-alpha); /* — Background: Status — */ --color-bg-neutral: var(--gray-100); --color-bg-info: var(--blue-sky-50); --color-bg-positive: var(--green-50); --color-bg-warning: var(--apricot-50); --color-bg-danger: var(--red-50); /* — Border: Base — */ --color-border-default: var(--gray-200); --color-border-secondary: var(--gray-300); --color-border-strong: var(--gray-400); --color-border-inverse: var(--white); --color-border-focus: var(--blue-sky-600); /* — Border: Status — */ --color-border-info: var(--blue-sky-300); --color-border-positive: var(--green-300); --color-border-warning: var(--apricot-300); --color-border-danger: var(--red-300); /* — Text: Base — */ --color-text-primary: var(--gray-900); --color-text-secondary: var(--gray-700); --color-text-tertiary: var(--gray-500); --color-text-disabled: var(--gray-300); --color-text-inverse: var(--white); --color-text-link: var(--blue-sky-600); --color-text-link-hover: var(--blue-sky-700); --color-text-link-visited: var(--blue-sky-800); /* — Text: Status — */ --color-text-info: var(--blue-sky-700); --color-text-positive: var(--green-700); --color-text-warning: var(--apricot-700); --color-text-danger: var(--red-700); /* — Icon: Base — */ --color-icon-primary: var(--gray-900); --color-icon-secondary: var(--gray-600); --color-icon-tertiary: var(--gray-400); --color-icon-disabled: var(--gray-300); --color-icon-inverse: var(--white); --color-icon-brand: var(--blue-sky-600); /* — Icon: Status — */ --color-icon-info: var(--blue-sky-600); --color-icon-positive: var(--green-600); --color-icon-warning: var(--apricot-600); --color-icon-danger: var(--red-600); /* — Brand (прямые) — */ --color-brand-primary: var(--blue-sky-700); /* #0058D2 */ --color-brand-primary-hover: var(--blue-sky-800); --color-brand-primary-active: var(--blue-sky-800); --color-brand-primary-subtle: var(--blue-sky-100); --color-brand-dark: #00357E; --color-brand-gov-bar: #F1F1F1; /* ============================================================ * 3. TYPOGRAPHY * ============================================================ */ --font-family-base: 'Onest', system-ui, -apple-system, sans-serif; /* — Desktop Display — */ --text-desktop-display-lg-size: 56px; --text-desktop-display-lg-weight: 600; --text-desktop-display-lg-height: 120%; --text-desktop-display-lg-spacing: 0%; --text-desktop-display-md-size: 48px; --text-desktop-display-md-weight: 600; --text-desktop-display-md-height: 120%; --text-desktop-display-md-spacing: 0%; /* — Desktop Headings — */ --text-desktop-heading-lg-size: 40px; --text-desktop-heading-lg-weight: 600; --text-desktop-heading-lg-height: 125%; --text-desktop-heading-lg-spacing: -1%; --text-desktop-heading-md-size: 32px; --text-desktop-heading-md-weight: 600; --text-desktop-heading-md-height: 125%; --text-desktop-heading-md-spacing: -1%; --text-desktop-heading-sm-size: 24px; --text-desktop-heading-sm-weight: 600; --text-desktop-heading-sm-height: 133%; --text-desktop-heading-sm-spacing: -1%; --text-desktop-heading-xs-size: 20px; --text-desktop-heading-xs-weight: 600; --text-desktop-heading-xs-height: 140%; --text-desktop-heading-xs-spacing: -1%; --text-desktop-heading-2xs-size: 16px; --text-desktop-heading-2xs-weight: 600; --text-desktop-heading-2xs-height: 150%; --text-desktop-heading-2xs-spacing: -1%; /* — Desktop Body — */ --text-desktop-body-lg-size: 18px; --text-desktop-body-lg-weight: 400; --text-desktop-body-lg-height: 150%; --text-desktop-body-lg-spacing: 0%; --text-desktop-body-lg-500-size: 18px; --text-desktop-body-lg-500-weight: 500; --text-desktop-body-lg-500-height: 150%; --text-desktop-body-md-size: 16px; --text-desktop-body-md-weight: 400; --text-desktop-body-md-height: 150%; --text-desktop-body-md-spacing: 0%; --text-desktop-body-md-500-size: 16px; --text-desktop-body-md-500-weight: 500; --text-desktop-body-md-500-height: 150%; --text-desktop-body-sm-size: 14px; --text-desktop-body-sm-weight: 400; --text-desktop-body-sm-height: 150%; --text-desktop-body-sm-spacing: 0%; --text-desktop-body-sm-500-size: 14px; --text-desktop-body-sm-500-weight: 500; --text-desktop-body-sm-500-height: 150%; /* — Desktop Caption — */ --text-desktop-caption-md-size: 12px; --text-desktop-caption-md-weight: 400; --text-desktop-caption-md-height: 133%; --text-desktop-caption-md-spacing: 0%; --text-desktop-caption-md-500-size: 12px; --text-desktop-caption-md-500-weight: 500; --text-desktop-caption-md-500-height: 133%; --text-desktop-caption-sm-size: 11px; --text-desktop-caption-sm-weight: 400; --text-desktop-caption-sm-height: 133%; /* — Mobile Display — */ --text-mobile-display-lg-size: 46px; --text-mobile-display-lg-weight: 600; --text-mobile-display-lg-height: 130%; --text-mobile-display-lg-spacing: 0%; --text-mobile-display-md-size: 40px; --text-mobile-display-md-weight: 600; --text-mobile-display-md-height: 130%; --text-mobile-display-md-spacing: 0%; /* — Mobile Headings — */ --text-mobile-heading-lg-size: 32px; --text-mobile-heading-lg-weight: 600; --text-mobile-heading-lg-height: 125%; --text-mobile-heading-lg-spacing: -1%; --text-mobile-heading-md-size: 26px; --text-mobile-heading-md-weight: 600; --text-mobile-heading-md-height: 130%; --text-mobile-heading-md-spacing: -1%; --text-mobile-heading-sm-size: 22px; --text-mobile-heading-sm-weight: 600; --text-mobile-heading-sm-height: 136%; --text-mobile-heading-sm-spacing: -1%; --text-mobile-heading-xs-size: 18px; --text-mobile-heading-xs-weight: 600; --text-mobile-heading-xs-height: 144%; --text-mobile-heading-xs-spacing: -1%; --text-mobile-heading-2xs-size: 16px; --text-mobile-heading-2xs-weight: 600; --text-mobile-heading-2xs-height: 150%; --text-mobile-heading-2xs-spacing: -1%; /* — Mobile Body — */ --text-mobile-body-lg-size: 18px; --text-mobile-body-lg-weight: 400; --text-mobile-body-lg-height: 150%; --text-mobile-body-lg-500-size: 18px; --text-mobile-body-lg-500-weight: 500; --text-mobile-body-lg-500-height: 150%; --text-mobile-body-md-size: 16px; --text-mobile-body-md-weight: 400; --text-mobile-body-md-height: 150%; --text-mobile-body-md-500-size: 16px; --text-mobile-body-md-500-weight: 500; --text-mobile-body-md-500-height: 150%; --text-mobile-body-sm-size: 14px; --text-mobile-body-sm-weight: 400; --text-mobile-body-sm-height: 150%; --text-mobile-body-sm-500-size: 14px; --text-mobile-body-sm-500-weight: 500; --text-mobile-body-sm-500-height: 150%; /* — Mobile Caption — */ --text-mobile-caption-md-size: 14px; --text-mobile-caption-md-weight: 400; --text-mobile-caption-md-height: 150%; --text-mobile-caption-md-500-size: 14px; --text-mobile-caption-md-500-weight: 500; --text-mobile-caption-md-500-height: 150%; --text-mobile-caption-sm-size: 12px; --text-mobile-caption-sm-weight: 400; --text-mobile-caption-sm-height: 133%; /* ============================================================ * 4. SPACING * ============================================================ */ --spacing-0: 0rem; /* 0px */ --spacing-2: 0.125rem; /* 2px */ --spacing-4: 0.25rem; /* 4px */ --spacing-6: 0.375rem; /* 6px */ --spacing-8: 0.5rem; /* 8px */ --spacing-12: 0.75rem; /* 12px */ --spacing-16: 1rem; /* 16px */ --spacing-20: 1.25rem; /* 20px */ --spacing-24: 1.5rem; /* 24px */ --spacing-32: 2rem; /* 32px */ --spacing-40: 2.5rem; /* 40px */ --spacing-48: 3rem; /* 48px */ --spacing-56: 3.5rem; /* 56px */ --spacing-64: 4rem; /* 64px */ --spacing-80: 5rem; /* 80px */ --spacing-96: 6rem; /* 96px */ --spacing-120: 7.5rem; /* 120px */ /* ============================================================ * 5. BORDER RADIUS * ============================================================ */ --border-radius-0: 0rem; /* 0px */ --border-radius-4: 0.25rem; /* 4px */ --border-radius-6: 0.375rem; /* 6px */ --border-radius-8: 0.5rem; /* 8px */ --border-radius-12: 0.75rem; /* 12px */ --border-radius-16: 1rem; /* 16px */ --border-radius-24: 1.5rem; /* 24px */ --border-radius-32: 2rem; /* 32px */ --border-radius-full: 62rem; /* 999px — pill */ /* — Radius aliases (form.css / legacy) — */ --radius-sm: var(--border-radius-4); --radius-md: var(--border-radius-6); --radius-lg: var(--border-radius-8); --radius-xl: var(--border-radius-12); /* — Border alias for form fallbacks (ex. tokens-form-extensions.css) — */ --color-border-primary: var(--gray-200); /* ============================================================ * 6. BORDER WIDTH * ============================================================ */ --border-width-05: 0.03125rem; /* 0.5px */ --border-width-1: 0.0625rem; /* 1px */ --border-width-15: 0.09375rem; /* 1.5px */ --border-width-2: 0.125rem; /* 2px */ --border-width-3: 0.187rem; /* 3px */ /** 7. ELEVATION (Drop Shadow) **/ --drop-shadow-100: 0 0 0.5px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.15); --drop-shadow-100-inverse: 0 0 0.5px rgba(0,0,0,0.30), 0 -1px 3px rgba(0,0,0,0.15); --drop-shadow-200: 0 0 0.5px rgba(0,0,0,0.18), 0 3px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.08); --drop-shadow-300: 0 0 0.5px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.08), 0 5px 12px rgba(0,0,0,0.08); --drop-shadow-400: 0 0 0.5px rgba(0,0,0,0.12), 0 10px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08); --drop-shadow-500: 0 3px 12px rgba(0,0,0,0.05), 0 0 0.5px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.12), 0 2px 5px rgba(0,0,0,0.10); --drop-shadow-600: 0 3px 12px rgba(0,0,0,0.05), 0 0 0.5px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.14), 0 6px 12px rgba(0,0,0,0.10); /** 8. LAYOUT / GRID **/ /* Breakpoints */ --breakpoint-xs: 375px; /* mobile — 4 col, gutter 16px, margin 16px */ --breakpoint-sm: 576px; /* mobile-lg — 4 col, gutter 16px, margin 16px */ --breakpoint-md: 768px; /* tablet — 8 col, gutter 24px, margin 24px */ --breakpoint-xl: 992px; /* desktop — 12 col, gutter 24px, margin 24px */ --breakpoint-2xl: 1280px; /* wide — 12 col, gutter 24px, margin 24px */ /* Container */ --container-max-width: 1328px; --container-padding-x: var(--spacing-24); /* Grid */ --grid-columns-mobile: 4; --grid-columns-tablet: 8; --grid-columns-desktop: 12; --grid-gutter-mobile: var(--spacing-16); /* 16px */ --grid-gutter-desktop: var(--spacing-24); /* 24px */ /* Header heights */ --header-top-height: 50px; --header-nav-height: 80px; --header-total-height: 130px; /** 9. Z-INDEX **/ --z-base: 0; --z-raised: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* ============================================================ * 10. FIGMA VARIABLES — Design System (import direct, aditiv) * ============================================================ /* — Primitive noi (fără corespondent în paleta existentă) — */ --brand-asp: #003366; --dark-gray: #121212; --charcoal: #36454F; --dark-charcoal: #333333; --gray-50: #F7F7F7; --gray-b2: #B2B2B2; /* border/background disabled — fără corespondent în --gray-XXX */ --blue-sky-200-alt: #CCDEF6; /* = blue-sky/200 din Figma; --blue-sky-200 existent e #B5D4F9, altă nuanță */ /* — Background: ASP (brand, cu stări) — */ --background-asp-default: #00357E; --background-asp-default-hover: #0058D2; --background-asp-tertiary: #08338F; --background-asp-secondary: #E8F0FB; --background-asp-secondary-hover: #CCDEF6; --background-asp-secondary-active: #99BCED; --background-asp-positive-default: #17C672; --background-asp-positive-default-hover: #027948; --background-asp-positive-default-active:#35AD77; --background-asp-positive-secondary: #E6F5EE; --background-asp-positive-secondary-hover:#CDEADD; --background-asp-positive-secondary-active:#9AD6BB; --background-asp-warning-default: #FDB022; --background-asp-warning-default-hover: #F79009; --background-asp-warning-default-active: #DC6803; --background-asp-warning-secondary: #FEF5DD; --background-asp-warning-secondary-hover:#FEEFC6; --background-asp-warning-secondary-active:#FEDF89; --background-asp-danger-default: #D92D20; --background-asp-danger-default-hover: #B32318; --background-asp-danger-default-active: #912018; --background-asp-danger-secondary: #FEEFEE; --background-asp-danger-secondary-hover: #FEE4E2; --background-asp-danger-secondary-active:#FECDC9; /* — Border: ASP — */ --border-asp-default: #00357E; --border-asp-default-icon: #0058D2; --border-asp-secondary: #99BCED; --border-asp-danger-default: #D92D20; --border-asp-danger-secondary:#FEE4E2; --border-transparent: #00357E; /* — Icon: ASP — */ --icon-asp-default: #00357E; --icon-asp-visited: #00357E; --icon-asp-secondary: #0058D2; --icon-asp-positive-default: #17C672; --icon-asp-danger-default: #D92D20; --icon-asp-white: #FFFFFF; --icon-asp-black: #000000; --icon-asp-dark-gray: #121212; /* — Text: ASP — */ --text-asp-default: #00357E; --text-asp-secondary: #0058D2; /* — Background: Base — */ --color-background-base-default: #FFFFFF; --color-background-base-default-hover: #F5F5F5; --color-background-base-default-active: #D9D9D9; --color-background-base-secondary: #F5F5F5; --color-background-base-secondary-hover: #F1F1F1; --color-background-base-secondary-active: #D9D9D9; --color-background-base-tertiary: #F1F1F1; --color-background-base-tertiary-hover: #D9D9D9; --color-background-base-tertiary-active: #B2B2B2; --color-background-base-inverse-default: #1E1E1E; --color-background-base-inverse-default-hover: #383838; --color-background-base-inverse-default-active:#444444; --color-background-base-inverse-on-color: #FFFFFF; --color-background-disabled-default: #F1F1F1; --color-background-disabled-secondary: #D9D9D9; --color-background-alpha-overlay-dark: rgba(18, 18, 18, 0.40); --color-background-alpha-overlay-light: rgba(255, 255, 255, 0.40); --color-background-alpha-large-surface: rgba(68, 68, 68, 0.03); --color-background-brand-default: #0058D2; --color-background-brand-secondary: #E8F0FB; --color-background-warning-default: #FDB022; --color-background-warning-secondary: #FEEFC6; --color-background-positive-secondary: #E6F5EE; --color-background-danger-secondary: #FEE4E2; /* — Border: Base / Status — */ --color-border-base-default: #D9D9D9; --color-border-base-secondary: #B2B2B2; --color-border-base-tertiary: #444444; --color-border-base-strong: #121212; --color-border-base-subtle: #FFFFFF; --color-border-brand-default: #3379DB; --color-border-disabled-default: #D9D9D9; --color-border-positive-default: #027948; --color-border-warning-default: #DC6803; --color-border-danger-default: #D92D20; /* — Text: Base / Brand / Status — */ --color-text-base-default: #121212; --color-text-base-secondary: #383838; --color-text-base-tertiary: #757575; --color-text-base-default-on-color: #121212; --color-text-base-secondary-on-color:#444444; --color-text-brand-default: #0058D2; --color-text-brand-default-hover: #0058D2; --color-text-brand-on-secondary: #0058D2; --color-text-brand-visited: #AA18CE; --color-text-disabled-default: #B2B2B2; --color-text-disabled-on-disabled: #B2B2B2; --color-text-positive-default: #039855; --color-text-positive-on-secondary: #027948; --color-text-warning-default: #B54708; --color-text-warning-on-secondary: #B54708; --color-text-danger-default: #D92D20; --color-text-danger-on-secondary: #B32318; /* — Icon: Base / Brand / Status — */ --color-icon-base-default: #121212; --color-icon-base-secondary: #444444; --color-icon-base-tertiary: #757575; --color-icon-base-default-on-color: #121212; --color-icon-base-inverse-default: #FFFFFF; --color-icon-base-inverse-on-color: #FFFFFF; --color-icon-brand-on-secondary: #0058D2; --color-icon-disabled-default: #B2B2B2; --color-icon-disabled-on-disabled: #B2B2B2; --color-icon-warning-default: #DC6803; --color-icon-warning-on-secondary: #B54708; }