/* Dietello — Design Tokens */

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

:root, [data-theme="light"] {
  --bg: #F6F2E9;
  --bg-deep: #ECE6D6;
  --surface: #FFFFFF;
  --surface-2: #FBF8F1;

  --ink: #181612;
  --ink-2: #4A453D;
  --ink-3: #8B857A;
  --ink-4: #B8B2A4;
  --line: #ECE6D8;
  --line-2: #E0D9C7;

  /* Акцентный «всегда тёмный» цвет — для активных кнопок, чипов, табов.
     Не инвертируется в dark mode, иначе фон=текст становится белый на белом. */
  --accent-bg: #181612;        /* фон активного элемента (тёмный в обеих темах) */
  --accent-fg: #FFFFFF;        /* текст/иконка на --accent-bg */
  --accent-fg-lime: #D4FF4F;   /* лаймовый акцент на тёмном фоне */

  /* Лаймовые фоны — текст всегда тёмный (лайм яркий, контраст в любой теме) */
  --on-lime: #181612;
  --on-lime-soft: #3D5A00;     /* тёмно-зелёный — читается на бежевом lime-soft */
  --on-coral-soft: #8A2A18;
  --on-indigo-soft: #3D3DC4;

  --on-dark-surface: #FFFFFF;

  --lime: #D4FF4F;
  --lime-soft: #ECFFA8;
  --lime-deep: #B8E600;
  --coral: #FF6A4D;
  --coral-soft: #FFDDD3;
  --indigo: #5C5BE6;
  --indigo-soft: #E5E4FF;
  --indigo-deep: #3D3DC4;

  --protein: #FF6A4D;
  --fat: #FFC04D;
  --carb: #5C5BE6;

  --r-card: 24px;
  --r-card-lg: 28px;
  --r-chip: 14px;
  --r-pill: 999px;

  --shadow-card: 0 1px 0 rgba(24,22,18,0.04), 0 2px 6px rgba(24,22,18,0.04);
  --shadow-elev: 0 4px 16px rgba(24,22,18,0.06), 0 1px 0 rgba(24,22,18,0.04);
}

[data-theme="dark"] {
  --bg: #0E0D0B;
  --bg-deep: #181612;
  --surface: #1C1A16;
  --surface-2: #23201B;

  --ink: #F6F2E9;
  --ink-2: #C8C2B4;
  --ink-3: #8A8478;
  --ink-4: #4F4A40;
  --line: #2A2722;
  --line-2: #383430;

  --on-dark-surface: #F6F2E9;
  /* Lime-soft в dark — полупрозрачный лайм, чтобы оставался "лаймовым" а не зелёным */
  --lime-soft: rgba(212, 255, 79, 0.16);
  --coral-soft: rgba(255, 106, 77, 0.20);
  --indigo-soft: rgba(92, 91, 230, 0.22);

  /* В dark mode «активный тёмный» = более светлый contrast, чем фон. */
  --accent-bg: #2A2722;        /* почти как surface-2 но с +2 уровня контраста */
  --accent-fg: #F6F2E9;
  --accent-fg-lime: #D4FF4F;

  /* Лаймовые фоны — текст всегда тёмный поверх яркого --lime,
     но на --lime-soft (полупрозрачный лайм на тёмном) нужен лаймовый текст */
  --on-lime: #181612;
  --on-lime-soft: #D4FF4F;
  --on-coral-soft: #FF6A4D;
  --on-indigo-soft: #5C5BE6;

  --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-elev: 0 4px 16px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.3);
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Onest', -apple-system, system-ui, sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.dt-display { font-family: 'Unbounded', 'Onest', sans-serif; letter-spacing: -0.03em; }
.dt-mono { font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; }

.dt-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
}

.dt-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dt-scroll::-webkit-scrollbar { display: none; }

button, input, textarea {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
  padding: 0;
  outline: none;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* Web app */
.dt-web {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
.dt-web ::-webkit-scrollbar { width: 8px; height: 8px; }
.dt-web ::-webkit-scrollbar-track { background: transparent; }
.dt-web ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }