/* Design tokens. Dark = ink night, light = warm paper. Violet is the brand accent, lime = "recorded",
   coral = "now". Telegram's color scheme picks the theme (data-theme on <html>). */

:root,
:root[data-theme="dark"] {
  --bg: #100d17;
  --bg-elev: #1a1524;
  --bg-elev-2: #241d31;
  --bg-press: #2c2439;
  --line: rgb(255 255 255 / 0.07);
  --line-strong: rgb(255 255 255 / 0.13);
  --text: #f4f1fa;
  --text-2: #a59db3;
  --text-3: #6d6579;

  --violet: #8f7bff;
  --violet-soft: rgb(143 123 255 / 0.16);
  --lime: #c8f53c;
  --lime-ink: #1a2300;
  --lime-soft: rgb(200 245 60 / 0.14);
  --coral: #ff6f4f;
  --coral-soft: rgb(255 111 79 / 0.14);
  --danger: #ff6b6b;

  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 8px 24px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.3);
  --media-outline: rgb(255 255 255 / 0.1);
  --qr-dot: #f4f1fa;
}

:root[data-theme="light"] {
  --bg: #f5f2ec;
  --bg-elev: #ffffff;
  --bg-elev-2: #efe9e0;
  --bg-press: #e7e0d5;
  --line: rgb(23 18 31 / 0.07);
  --line-strong: rgb(23 18 31 / 0.13);
  --text: #17121f;
  --text-2: #6b6476;
  --text-3: #a39cab;

  --violet: #5b3fd6;
  --violet-soft: rgb(91 63 214 / 0.1);
  --lime: #b6e61f;
  --lime-ink: #1a2300;
  --lime-soft: rgb(126 170 0 / 0.14);
  --coral: #ef5430;
  --coral-soft: rgb(239 84 48 / 0.1);
  --danger: #d93a3a;

  --shadow-1: 0 1px 2px rgb(23 18 31 / 0.06), 0 0 0 1px rgb(23 18 31 / 0.04);
  --shadow-2: 0 12px 32px rgb(23 18 31 / 0.1), 0 2px 6px rgb(23 18 31 / 0.06), 0 0 0 1px rgb(23 18 31 / 0.04);
  --media-outline: rgb(0 0 0 / 0.1);
  --qr-dot: #17121f;
}

:root {
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --pad: 16px;
  --gap: 12px;
  --tabs-h: 64px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Member colors: distinct, friendly, readable with dark ink on top. */
  --m0: #ff9f7a; --m1: #ffd36b; --m2: #7fe0f0; --m3: #b9a0ff;
  --m4: #8ef0a8; --m5: #f7a3dd; --m6: #a4bdff; --m7: #ffc3a8;
  --m-ink: #1b1424;
}