/* Нити — дизайн-токены. Единственное место с цветами. */
:root {
  --font: -apple-system, "SF Pro Text", "Helvetica Neue", "Inter", Roboto, "Segoe UI", sans-serif;
  --font-display: -apple-system, "SF Pro Display", "Helvetica Neue", "Inter", Roboto, sans-serif;
  --fs-xs: 11px; --fs-s: 13px; --fs-m: 15px; --fs-l: 22px; --fs-xl: 34px;
  --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-phone: 52px; --r-pill: 999px;
  --dur: 800ms;
}

/* Светлая: Sand + Cyprus */
:root, :root[data-theme="light"] {
  --page: #E4E0D5;          /* вокруг телефона */
  --bg: #F0EDE4;            /* Sand */
  --bg-2: #F6F4EE;          /* мягкий свет в центре фона */
  --surface: #F5F3EC;       /* матовые карточки */
  --surface-edge: #E2DDD0;
  --ink: #1F2523;
  --ink-dim: #6F6C63;
  --ink-faint: #A9A497;
  --accent: #004741;        /* Cyprus */
  --on-accent: #F0EDE4;
  --thread-me: #2A302E;
  --thread-1: #557A73;      /* приглушённый Cyprus */
  --thread-2: #B3A991;      /* тёплый песок */
  --thread-3: #8EA19B;      /* серо-зелёный */
  --sheen: #FFFFFF;
  --shadow: #4A4232;
  --card-shadow: 0 10px 30px rgba(74, 66, 50, .12), 0 2px 6px rgba(74, 66, 50, .08);
  --phone-shadow: 0 40px 80px rgba(74, 66, 50, .22), 0 8px 20px rgba(74, 66, 50, .10);
  --grain-opacity: .09;
  --grain-blend: multiply;
  --qr-card: #F0EDE4;       /* карточка QR светлая в обеих темах — ради сканеров */
  --qr-ink: #1F2523;
}

/* Тёмная: Dark Gray + Tiffany */
:root[data-theme="dark"] {
  --page: #0E0E0E;
  --bg: #171717;            /* Dark Gray */
  --bg-2: #1D1D1C;
  --surface: #1C1C1B;
  --surface-edge: #262625;
  --ink: #E6E3DB;
  --ink-dim: #8C8980;
  --ink-faint: #55534E;
  --accent: #21F1A8;        /* Tiffany */
  --on-accent: #171717;
  --thread-me: #DCD7CB;
  --thread-1: #5E8C80;      /* приглушённая бирюза */
  --thread-2: #9A927F;      /* тусклый песок */
  --thread-3: #4C605A;      /* тёмная морская */
  --sheen: #FFFFFF;
  --shadow: #000000;
  --card-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --phone-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 8px 20px rgba(0, 0, 0, .4);
  --grain-opacity: .07;
  --grain-blend: overlay;
  --qr-card: #F0EDE4;
  --qr-ink: #1F2523;
}