/* CSS Variables for UI Components - Modern Mobile App Style */
:root {
/* Colors - Primary (Accent color) */
--color-primary: #840087;
--color-primary-hover: #6D0070;
--color-primary-active: #5A005C;
--color-primary-light: rgba(132, 0, 135, 0.1);
--color-primary-shadow: rgba(132, 0, 135, 0.25);
--color-primary-shadow-light: rgba(132, 0, 135, 0.15);
/* Colors - Secondary */
--color-secondary: #E3B759;
--color-secondary-hover: #D4A84A;
--color-secondary-active: #C5993B;
--color-secondary-light: rgba(227, 183, 89, 0.1);
--color-secondary-bg: #F9FAFB;
/* Colors - Danger */
--color-danger: #EF4444;
--color-danger-hover: #DC2626;
--color-danger-light: rgba(239, 68, 68, 0.1);
/* Colors - Text */
--color-text: #1F2937;
--color-text-secondary: #6B7280;
--color-text-muted: #9CA3AF;
/* Colors - Background */
--color-bg: #FFFFFF;
--color-bg-secondary: #F9FAFB;
--color-bg-disabled: #F3F4F6;
--color-app-background: #F5EFFA;
/* Colors - Border (Very subtle, almost invisible) */
--color-border: rgba(0, 0, 0, 0.08);
--color-border-subtle: rgba(0, 0, 0, 0.05);
--color-border-focus: #840087;
--color-border-error: #EF4444;
/* Colors - Accent (Pink/Fuchsia for CTAs, notifications) */
--color-accent: #EC4899;
--color-accent-hover: #DB2777;
--color-accent-light: rgba(236, 72, 153, 0.1);
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 0.75rem;
--spacing-lg: 1rem;
--spacing-xl: 1.5rem;
--spacing-2xl: 2rem;
/* Border Radius - More rounded for modern mobile feel */
--border-radius-sm: 0.375rem;
--border-radius-md: 0.75rem;
--border-radius-lg: 1rem;
--border-radius-xl: 1.5rem;
--border-radius-full: 9999px;
/* Typography */
/* Шрифт - современный sans-serif для мобильных приложений */
/* Системный стек (по умолчанию) - быстрая загрузка, нативный вид */
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* Альтернатива: Inter (раскомментировать и подключить через Google Fonts) */
/* Для подключения Inter добавьте в :
*/
/* --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
--font-size-xs: 0.8125rem;
--font-size-sm: 0.9375rem;
--font-size-base: 1.0625rem;
--font-size-lg: 1.1875rem;
--font-size-xl: 1.375rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-base: 1.5;
--line-height-tight: 1.25;
/* Transitions - Smooth and natural */
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Shadows - Very soft, barely noticeable (Modern Mobile App Style) */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
--shadow-focus: 0 0 0 3px var(--color-primary-light);
--shadow-error: 0 0 0 3px var(--color-danger-light);
/* Z-index */
--z-index-base: 1;
--z-index-dropdown: 1000;
--z-index-modal: 1050;
/* Component specific */
--button-min-width: 120px;
--button-height: 40px;
--input-padding-x: 1rem;
--input-padding-y: 0.875rem;
--input-border-width: 1px;
/* Icon sizes */
--icon-size-sm: 16px;
--icon-size-base: 20px;
--icon-size-lg: 24px;
--icon-size-xl: 32px;
/* Layout */
--container-max-width: 1280px;
--container-padding: 1rem;
/* Header */
--header-height-mobile: 110px;
--header-height-desktop: 81px;
}
/* ========================================
Mobile-first adjustments (larger touch targets)
======================================== */
/* Small mobile screens (320px - 480px) */
@media (max-width: 480px) {
:root {
/* Larger font sizes for readability */
--font-size-xs: 0.875rem; /* 14px - было 13px */
--font-size-sm: 1rem; /* 16px - было 15px */
--font-size-base: 1.0625rem; /* 17px - было 16px */
--font-size-lg: 1.1875rem; /* 19px - было 18px */
--font-size-xl: 1.5rem; /* 24px - было 22px */
/* Larger spacing for touch */
--spacing-xs: 0.375rem; /* 6px */
--spacing-sm: 0.625rem; /* 10px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.25rem; /* 20px */
--spacing-xl: 1.75rem; /* 28px */
--spacing-2xl: 2.25rem; /* 36px */
/* Larger touch targets */
--button-height: 48px;
--button-min-width: 100px;
--input-padding-x: 1rem;
--input-padding-y: 1rem;
/* Larger icons */
--icon-size-sm: 18px;
--icon-size-base: 22px;
--icon-size-lg: 28px;
--icon-size-xl: 36px;
/* More rounded corners */
--border-radius-sm: 0.5rem;
--border-radius-md: 0.875rem;
--border-radius-lg: 1.125rem;
--border-radius-xl: 1.5rem;
}
}
/* Standard mobile (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
:root {
/* Slightly larger than small mobile */
--font-size-xs: 0.875rem; /* 14px - было 13px */
--font-size-sm: 1rem; /* 16px - было 15px */
--font-size-base: 1.0625rem; /* 17px - было 16px */
--font-size-lg: 1.1875rem; /* 19px - было 18px */
--font-size-xl: 1.4375rem; /* 23px - было 21px */
--spacing-xs: 0.375rem;
--spacing-sm: 0.625rem;
--spacing-md: 0.875rem;
--spacing-lg: 1.125rem;
--spacing-xl: 1.625rem;
--spacing-2xl: 2.125rem;
--button-height: 46px;
--icon-size-sm: 18px;
--icon-size-base: 22px;
--icon-size-lg: 26px;
}
}