/* css/variables.css */
:root {
    /* Синие */
    --color-sky-blue:    #8FDFFF;
    --color-ice-blue:    #D7F1F9;
    --color-ocean-blue:  #3A779D;
    
    /* Красные */
    --color-dynamic-red:    #DD0510;
    --color-dynamic-red-25: rgba(221, 5, 16, 0.25);
    --color-dynamic-red-10: rgba(221, 5, 16, 0.10);
    
    /* Серые */
    --color-light-gray:  #DADADA;
    --color-medium-gray: #706F6F;
    --color-dark-gray:   #3C3C3B;
    --color-bg:          #F3F4F4;
    
    /* Дополнительные */
    --color-lime-green:  #DBF27C;
    --color-soft-yellow: #FFF8B8;
    --color-terracotta:  #E94E1B;
    
    /* Белый */
    --color-white:       #FFFFFF;
    
    /* Функциональные */
    --color-text:        #3C3C3B;
    --color-text-light:  #706F6F;
    --color-border:      #DADADA;
    --color-success:     #DBF27C;
    --color-warning:     #FFF8B8;
    --color-danger:      #DD0510;
    
    /* Размеры */
    --header-height:     56px;
    --tabbar-height:     64px;
    --modal-radius:      16px;
    --fab-size:          56px;
    --safe-area-bottom:  env(safe-area-inset-bottom, 0px);
    
    /* Шрифты */
    --font-family:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs:      11px;
    --font-size-sm:      13px;
    --font-size-md:      15px;
    --font-size-lg:      17px;
    --font-size-xl:      20px;
    --font-size-xxl:     28px;
    
    /* Тени */
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:         0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg:         0 8px 24px rgba(0,0,0,0.16);
    
    /* Анимации */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;
}