/* ВкусВилл — токены дизайн-системы. Источник цветов и шрифтов: https://vkusvill.ru/brand/ */

@font-face {
  font-family: 'Villula';
  src: url('./fonts/villula-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EuclidCircularB';
  src: url('./fonts/EuclidCircularB-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Основные бренд-цвета ─── */
  --color-green:        #2dbe64;
  --color-green-dark:   #28aa59;
  --color-green-light:  #f0faf4;
  --color-green-mid:    #b8e8cb;

  --color-berry:        #d7144b;
  --color-berry-dark:   #bf1243;
  --color-berry-light:  #fff5f8;
  --color-berry-mid:    #f5a0b8;

  --color-graphite:     #333333;
  --color-graphite-60:  #7a7a7a;
  --color-graphite-40:  #a8a8a8;
  --color-graphite-20:  #e0e0e0;

  --color-white:        #ffffff;
  --color-off-white:    #f5f5f5;
  --color-border:       #e8e8e8;

  /* ─── Акцентные цвета бренда (промо/статусы) ─── */
  --color-accent-yellow: #ffd508;
  --color-accent-orange: #fa5f0a;
  --color-accent-green-light: #9ae894;
  --color-accent-red:    #ff3c3c;
  --color-accent-blue:   #54b3ff;

  /* ─── Семантические цвета ─── */
  --color-bg:           #ffffff;
  --color-bg-surface:   #f5f5f5;
  --color-bg-inverse:   #333333;

  --color-text-primary:   #333333;
  --color-text-secondary: #7a7a7a;
  --color-text-disabled:  #a8a8a8;
  --color-text-inverse:   #ffffff;
  --color-text-link:      #2dbe64;

  --color-action-primary:       #2dbe64;
  --color-action-primary-hover: #28aa59;
  --color-action-primary-press: #239950;
  --color-action-danger:        #d7144b;
  --color-action-danger-hover:  #bf1243;

  /* ─── Типографика: реальные бренд-шрифты ─── */
  --font-display:  'Villula', 'Montserrat', -apple-system, sans-serif;
  --font-ui:       'EuclidCircularB', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ─── Шкала размеров ─── */
  --text-h1:       36px;
  --text-h2:       28px;
  --text-h3:       22px;
  --text-h4:       18px;
  --text-body:     16px;
  --text-small:    14px;
  --text-caption:  13px;
  --text-micro:    11px;

  --lh-heading: 1.2;
  --lh-body:    1.5;

  /* ─── Отступы ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ─── Радиусы и тени ─── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-pill: 999px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.12);

  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
}