/* EatForq — design tokens (общие с Mini App).
   Цвет работает функционально (зоны состояния), не декоративно. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root, [data-theme="light"] {
  /* Telegram tokens */
  --tgui--bg-color:            #efeff4;
  --tgui--secondary_bg_color:  #ffffff;
  --tgui--tertiary_bg_color:   #f7f7f8;
  --tgui--hint_color:          #707579;
  --tgui--accent-color:        #2481cc;
  --tgui--text-color:          #000000;
  --tgui--destructive-color:   #c14545;
  --tgui--section_header_text: #6d6d72;
  --tgui--header_bg:           #f7f7f8;
  --tgui--separator:           rgba(60,60,67,0.12);

  /* App surfaces */
  --app-bg:           var(--tgui--bg-color);
  --app-surface:      var(--tgui--secondary_bg_color);
  --app-surface-2:    #f3f3f5;
  --app-text:         var(--tgui--text-color);
  --app-text-sec:     var(--tgui--hint_color);
  --app-text-ter:     #a8a8ae;
  --app-divider:      rgba(60,60,67,0.12);
  --app-border:       rgba(0,0,0,0.06);

  /* Zones — приглушённая medical-палитра */
  --zone-red:    #b85a5a;
  --zone-yellow: #b08938;
  --zone-green:  #5a8a6a;
  --zone-orange: #c4824a;
  --zone-none:   #8e8e93;

  --zone-red-bg:    rgba(184,90,90,0.10);
  --zone-yellow-bg: rgba(176,137,56,0.10);
  --zone-green-bg:  rgba(90,138,106,0.10);
  --zone-orange-bg: rgba(196,130,74,0.10);
  --zone-none-bg:   rgba(142,142,147,0.10);

  --zone-track:     rgba(0,0,0,0.055);
  --zone-tick:      rgba(0,0,0,0.18);

  --shadow-card:    0 1px 2px rgba(0,0,0,0.04);
}

[data-theme="dark"] {
  --tgui--bg-color:            #17171a;
  --tgui--secondary_bg_color:  #232326;
  --tgui--tertiary_bg_color:   #1c1c1f;
  --tgui--hint_color:          #8b8e93;
  --tgui--accent-color:        #6caeed;
  --tgui--text-color:          #ffffff;
  --tgui--destructive-color:   #e07b7b;
  --tgui--section_header_text: #8b8e93;
  --tgui--header_bg:           #1c1c1f;
  --tgui--separator:           rgba(120,120,128,0.30);

  --app-bg:           var(--tgui--bg-color);
  --app-surface:      var(--tgui--secondary_bg_color);
  --app-surface-2:    #2a2a2e;
  --app-text:         var(--tgui--text-color);
  --app-text-sec:     var(--tgui--hint_color);
  --app-text-ter:     #6d6d72;
  --app-divider:      rgba(255,255,255,0.08);
  --app-border:       rgba(255,255,255,0.06);

  --zone-red:    #c97070;
  --zone-yellow: #c9a14e;
  --zone-green:  #6fa583;
  --zone-orange: #d4925a;
  --zone-none:   #8e8e93;

  --zone-red-bg:    rgba(201,112,112,0.16);
  --zone-yellow-bg: rgba(201,161,78,0.16);
  --zone-green-bg:  rgba(111,165,131,0.16);
  --zone-orange-bg: rgba(212,146,90,0.16);
  --zone-none-bg:   rgba(142,142,147,0.16);

  --zone-track:     rgba(255,255,255,0.06);
  --zone-tick:      rgba(255,255,255,0.22);

  --shadow-card:    0 1px 2px rgba(0,0,0,0.4);
}