/* ═══════════════════════════════════════════════════════════════════
   mimiart.bg - дизайн системата дословно

   Херметичен набор: всяка променлива носи представка `mi-`, защото
   темата има свои токени със СЪЩИТЕ имена и ДРУГИ стойности
   (`--space-8` е 8 px при темата). Мостът към темата е в
   `koja-mimiart.css` и се зарежда СЛЕД този файл.

   Цветовете са мерени, не избрани на око. До всеки стои измереният
   контраст; където пише „не носи текст", това е правило, не бележка.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Повърхности ───────────────────────────────────────────────── */
  --mi-page:            #FFF1F3; /* фонът на страницата, едва розов */
  --mi-surface:         #FFFFFF; /* карти, полета, изскачащи кутии */
  --mi-surface-sunken:  #F8E4E9; /* мястото под снимка; дребната пъстра
                                    стока се губи върху чисто бяло */

  /* ── Текст ─────────────────────────────────────────────────────── */
  --mi-ink:             #2E2226; /* 13,9:1 върху page */
  --mi-ink-muted:       #6E5A60; /* 5,3:1 върху page - това е ДОЛНАТА
                                    граница за приглушен текст */

  /* ── Марката ───────────────────────────────────────────────────── */
  /* Розовото е УКРАСА. 2,4:1 върху бяло, тоест НИКОГА не носи текст,
     не е фон на бутон с надпис и не е цвят на връзка. */
  --mi-rose:            #D4749A;
  --mi-rose-soft:       #F8E4E9; /* фон под ink - това е начинът розовото
                                    да се ползва с текст отгоре */

  /* ── Действие ──────────────────────────────────────────────────── */
  /* Петролено синьо, не розово. Купуването трябва да се различава от
     украсата - иначе цялата страница е един цвят и нищо не изпъква. */
  --mi-action:          #1B5E7E; /* бял текст отгоре: 7,0:1 */
  --mi-action-hover:    #174F6A;
  --mi-action-press:    #123D52;
  --mi-on-action:       #FFFFFF;

  /* ── Състояния ─────────────────────────────────────────────────── */
  --mi-sale:            #C2185B; /* 6,2:1 върху бяло - носи текст */
  --mi-on-sale:         #FFFFFF;
  --mi-success:         #1F7A5A;
  --mi-success-soft:    #E6F4EE;

  /* ── Линии ─────────────────────────────────────────────────────── */
  --mi-border:          #EADDDE; /* косъм между карти; НЕ е за поле */
  --mi-border-control:  #8A7076; /* рамка на поле за писане: 4,5:1 върху
                                    бяло. Като ТЕКСТ пада на 4,0 и не
                                    става - затова са два токена. */
  --mi-focus:           #1B5E7E;

  /* ── Шрифтове ──────────────────────────────────────────────────── */
  /* Rubik за заглавия, Golos Text за текст. И двата с кирилица и
     двата различни от Onest, Manrope и Playfair на сестринските
     сайтове - магазинът трябва да се чете като свой, не като трети
     клон на същия. */
  --mi-font-display: "Rubik", "Rubik Fallback", system-ui, sans-serif;
  --mi-font-text:    "Golos Text", "Golos Fallback", system-ui, -apple-system, sans-serif;

  /* ── Размери на буквите ────────────────────────────────────────── */
  --mi-hero:     clamp(30px, 4.4vw, 54px);
  --mi-display:  clamp(24px, 3vw, 36px);
  --mi-title:    20px;
  --mi-title-s:  17px;
  --mi-body:     16px;  /* ДОЛНА граница за поле за писане: под 16 px
                           Safari на iPhone увеличава страницата и я
                           оставя така */
  --mi-body-s:   14px;
  --mi-code:     13px;  /* кодът на артикула, с разредка */

  /* ── Отстояния ─────────────────────────────────────────────────── */
  --mi-space-1: 4px;
  --mi-space-2: 8px;
  --mi-space-3: 12px;
  --mi-space-4: 16px;
  --mi-space-5: 24px;
  --mi-space-6: 32px;
  --mi-space-7: 48px;
  --mi-space-8: 64px;

  /* ── Радиуси ───────────────────────────────────────────────────── */
  --mi-radius-sm:   6px;
  --mi-radius-md:  10px;
  --mi-radius-lg:  16px;
  --mi-radius-pill: 999px;

  /* ── Докосване ─────────────────────────────────────────────────── */
  --mi-tap: 44px; /* кръглото копче „добави" е подписът на магазина */
}