html:root, html[data-theme="dark"] {
  --mk-bg: #000000;
  --mk-bg-soft: #0a0a0c;
  --mk-surface: #0c0c0f;
  --mk-surface-strong: #111116;
  --mk-surface-elevated: #17171d;
  --mk-text: #f7f4ec;
  --mk-text-strong: #ffffff;
  --mk-muted: #9a96a6;
  --mk-muted-strong: #c9c4d2;
  --mk-line: #25252d;
  --mk-line-strong: #373742;
  --mk-accent: #ffc400;
  --mk-accent-hover: #ffd43b;
  --mk-accent-soft: rgba(255, 196, 0, 0.14);
  --mk-accent-line: rgba(255, 196, 0, 0.42);
  --mk-on-accent: #111111;
  --mk-nutrition-accent: #facc15;
  --mk-nutrition-accent-hover: #fde047;
  --mk-nutrition-accent-soft: rgba(250, 204, 21, 0.10);
  --mk-nutrition-accent-line: rgba(250, 204, 21, 0.48);
  --mk-on-nutrition-accent: #18181b;
  --mk-nutrition-icon-accent: rgba(110, 183, 54, 0.95);
  --mk-on-nutrition-icon-accent: #091004;
  --mk-referral-accent: #9a72dc;
  --mk-referral-accent-soft: rgba(154, 114, 220, 0.12);
  --mk-referral-accent-line: rgba(154, 114, 220, 0.38);
  --mk-on-referral-accent: #ffffff;
  --mk-success: #20d691;
  --mk-success-soft: rgba(32, 214, 145, 0.14);
  --mk-warning: #ffc400;
  --mk-warning-soft: rgba(255, 196, 0, 0.12);
  --mk-info: #62a9ff;
  --mk-info-soft: rgba(98, 169, 255, 0.12);
  --mk-info-line: rgba(98, 169, 255, 0.70);
  --mk-on-info: #081018;
  --mk-danger: #ff5d5d;
  --mk-danger-soft: rgba(255, 93, 93, 0.12);
  --mk-on-danger: #ffffff;
  --mk-overlay-soft: rgba(255, 255, 255, 0.035);
  --mk-overlay-muted: rgba(255, 255, 255, 0.08);
  --mk-overlay-border: rgba(255, 255, 255, 0.12);
  --mk-input-bg: rgba(0, 0, 0, 0.20);
  --mk-nav-bg: rgba(8, 8, 10, 0.97);
  --mk-nav-border: rgba(255, 255, 255, 0.12);
  --mk-nav-shadow: 0px -10px 34px 0px rgba(0, 0, 0, 0.44);
  --mk-shadow: 0px 24px 80px 0px rgba(0, 0, 0, 0.42);
  --mk-card-shadow: 0px 16px 42px 0px rgba(0, 0, 0, 0.20);
  --mk-focus-ring: rgba(255, 196, 0, 0.42);
  --mk-scrollbar-thumb: #555555;
  --mk-card-gradient-start: rgba(22, 22, 27, 0.97);
  --mk-card-gradient-end: rgba(9, 9, 12, 0.98);
  --mk-card-solid: rgba(14, 14, 18, 0.90);
  --mk-referral-gradient-start: rgba(20, 18, 8, 0.94);
  --mk-referral-gradient-end: rgba(9, 9, 12, 0.98);
  --mk-telegram-background: #000000;
  --mk-telegram-header: #000000;
}

html[data-theme="light"] {
  --mk-bg: #f5f3ef;
  --mk-bg-soft: #ece9e3;
  --mk-surface: #ffffff;
  --mk-surface-strong: #faf8f4;
  --mk-surface-elevated: #ffffff;
  --mk-text: #343238;
  --mk-text-strong: #1d1c20;
  --mk-muted: #77737b;
  --mk-muted-strong: #5f5b63;
  --mk-line: #ddd9d2;
  --mk-line-strong: #c9c4bc;
  --mk-accent: #f5b51b;
  --mk-accent-hover: #eaa910;
  --mk-accent-soft: rgba(245, 181, 27, 0.13);
  --mk-accent-line: rgba(214, 151, 0, 0.38);
  --mk-on-accent: #242328;
  --mk-nutrition-accent: #f2b31c;
  --mk-nutrition-accent-hover: #e5a20e;
  --mk-nutrition-accent-soft: rgba(242, 179, 28, 0.12);
  --mk-nutrition-accent-line: rgba(218, 147, 0, 0.38);
  --mk-on-nutrition-accent: #242328;
  --mk-nutrition-icon-accent: rgba(110, 183, 54, 0.95);
  --mk-on-nutrition-icon-accent: #091004;
  --mk-referral-accent: #7454ad;
  --mk-referral-accent-soft: rgba(116, 84, 173, 0.10);
  --mk-referral-accent-line: rgba(116, 84, 173, 0.30);
  --mk-on-referral-accent: #ffffff;
  --mk-success: #16865f;
  --mk-success-soft: rgba(22, 134, 95, 0.11);
  --mk-warning: #b67800;
  --mk-warning-soft: rgba(182, 120, 0, 0.10);
  --mk-info: #356fae;
  --mk-info-soft: rgba(53, 111, 174, 0.10);
  --mk-info-line: rgba(53, 111, 174, 0.45);
  --mk-on-info: #ffffff;
  --mk-danger: #c84848;
  --mk-danger-soft: rgba(200, 72, 72, 0.10);
  --mk-on-danger: #ffffff;
  --mk-overlay-soft: rgba(52, 50, 56, 0.035);
  --mk-overlay-muted: rgba(52, 50, 56, 0.07);
  --mk-overlay-border: rgba(52, 50, 56, 0.12);
  --mk-input-bg: #ffffff;
  --mk-nav-bg: rgba(255, 255, 255, 0.96);
  --mk-nav-border: rgba(52, 50, 56, 0.12);
  --mk-nav-shadow: 0px -10px 34px 0px rgba(52, 50, 56, 0.12);
  --mk-shadow: 0px 24px 80px 0px rgba(52, 50, 56, 0.12);
  --mk-card-shadow: 0px 16px 42px 0px rgba(52, 50, 56, 0.09);
  --mk-focus-ring: rgba(245, 181, 27, 0.38);
  --mk-scrollbar-thumb: #aaa5ad;
  --mk-card-gradient-start: rgba(255, 255, 255, 0.99);
  --mk-card-gradient-end: rgba(250, 248, 244, 0.99);
  --mk-card-solid: rgba(255, 255, 255, 0.94);
  --mk-referral-gradient-start: rgba(255, 250, 235, 0.99);
  --mk-referral-gradient-end: rgba(250, 248, 244, 0.99);
  --mk-telegram-background: #f5f3ef;
  --mk-telegram-header: #f5f3ef;
}