/* Design tokens — «همنشین».
 *
 * The app owns its palette instead of bridging Telegram's theme variables: a warm
 * plum-and-rose room in the dark, a pale rose one in the light. We follow only
 * Telegram's light/dark *choice* (tg.js stamps data-theme), never its individual
 * colours, so the app looks the same in every client and custom theme.
 *
 * Three states, deliberately: bare :root is light, prefers-color-scheme covers the
 * moment before tg.js has stamped anything (and life outside Telegram), and
 * [data-theme] wins over both. Never give a colour its only definition inside the
 * media query — the stamped attribute has to be able to override it.
 *
 * The --ink/--bg/--accent names are the vocabulary of the design. The block at the
 * bottom keeps the older --text/--card/--rose names alive as aliases, which is what
 * lets the admin panel inherit this palette without touching its fourteen screens.
 */

:root {
  /* --- light ------------------------------------------------------------------ */
  --bg: #fdf2f4;        /* the page */
  --bg-2: #fffafb;      /* cards standing on the page */
  --bg-3: #f8e7ec;      /* insets inside a card */
  --bg-4: #f0d6de;      /* the deepest inset — tracks, empty cells */

  --line: rgb(90 30 50 / 13%);
  --line-2: rgb(90 30 50 / 25%);

  --ink: #331a22;       /* primary text */
  --ink-2: #77545f;     /* secondary text */
  --ink-3: #a2818c;     /* meta, hints, disabled */

  --accent: #c93c5b;
  --accent-soft: rgb(201 60 91 / 12%);
  --accent-ink: #fff5f7; /* text ON the accent */
  --accent-line: rgb(201 60 91 / 42%);

  /* Two people, two fixed identities — assigned by side, never by rank. Always
     paired with a name or a filled/ringed dot, so colour never carries identity
     alone. A = the admin side, B = the partner side. */
  --p-a: #1f8d90;
  --p-a-soft: rgb(31 141 144 / 13%);
  --p-b: #c25a86;
  --p-b-soft: rgb(194 90 134 / 13%);

  /* Semantic, tuned to the room rather than borrowed from a system palette. */
  --ok: #1c7a53;
  --ok-soft: rgb(28 122 83 / 12%);
  --warn: #9a6a12;
  --warn-soft: rgb(154 106 18 / 13%);
  --danger: #b3261e;
  --danger-soft: rgb(179 38 30 / 11%);

  --shadow-1: 0 1px 2px rgb(90 30 50 / 6%);
  --shadow-2: 0 10px 30px rgb(150 40 70 / 12%);
  --scrim: rgb(60 20 34 / 46%);

  /* --- type ------------------------------------------------------------------- */
  /* Shabnam carries the reading; Lalezar is the display face — big numbers and the
     few headlines that should feel hand-lettered rather than set. */
  --font-text: Shabnam, Vazirmatn, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-display: Lalezar, Shabnam, Vazirmatn, sans-serif;

  --fs-display: 1.55rem;  /* Lalezar headline */
  --fs-title: 1.18rem;
  --fs-h2: 1.03rem;
  --fs-body: 0.9rem;
  --fs-meta: 0.78rem;
  --fs-small: 0.72rem;
  --fs-tiny: 0.66rem;
  --fs-num: 1.42rem;      /* Lalezar counters (countdown cells, stat tiles) */

  /* --- shape ------------------------------------------------------------------ */
  /* Generously round, and rounder the bigger the surface — the design's main
     structural signal, so these five steps are used deliberately, not by feel. */
  --r-xl: 22px;   /* hero cards */
  --r-card: 20px; /* cards, list rows */
  --r-md: 18px;   /* option cards, inner blocks */
  --r-btn: 16px;  /* buttons, inputs */
  --r-sm: 14px;   /* icon tiles, chips-with-corners */
  --r-xs: 11px;
  --r-pill: 999px;
  --r-sheet: 24px 24px 0 0;

  /* --- space (4px grid; kept from v1 so the admin panel's layout is undisturbed) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* --- motion ----------------------------------------------------------------- */
  --dur-micro: 150ms;
  --dur-std: 260ms;
  --dur-entrance: 380ms;
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);

  /* --- layout ----------------------------------------------------------------- */
  --topbar-h: 52px;
  --tabbar-h: 62px;
  --vh: 100vh;
}

/* Dark, for the moment before tg.js stamps data-theme (and outside Telegram).
   Guarded so an explicit light stamp still wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a0d13;
    --bg-2: #25131b;
    --bg-3: #311a23;
    --bg-4: #40222d;

    --line: rgb(255 214 226 / 12%);
    --line-2: rgb(255 214 226 / 22%);

    --ink: #fbecef;
    --ink-2: #d3b3bd;
    --ink-3: #a1808c;

    --accent: #f2607a;
    --accent-soft: rgb(242 96 122 / 16%);
    --accent-ink: #2b0810;
    --accent-line: rgb(242 96 122 / 44%);

    --p-a: #5fc9c9;
    --p-a-soft: rgb(95 201 201 / 16%);
    --p-b: #f7a8c8;
    --p-b-soft: rgb(247 168 200 / 16%);

    --ok: #5fcaa1;
    --ok-soft: rgb(95 202 161 / 16%);
    --warn: #e0b15c;
    --warn-soft: rgb(224 177 92 / 16%);
    --danger: #f2726e;
    --danger-soft: rgb(242 114 110 / 16%);

    /* Shadows read as grime on a dark surface; the borders carry elevation there. */
    --shadow-1: none;
    --shadow-2: none;
    --scrim: rgb(14 6 10 / 66%);
  }
}

/* The stamped choice — the one that actually runs inside Telegram. */
:root[data-theme="dark"] {
  --bg: #1a0d13;
  --bg-2: #25131b;
  --bg-3: #311a23;
  --bg-4: #40222d;

  --line: rgb(255 214 226 / 12%);
  --line-2: rgb(255 214 226 / 22%);

  --ink: #fbecef;
  --ink-2: #d3b3bd;
  --ink-3: #a1808c;

  --accent: #f2607a;
  --accent-soft: rgb(242 96 122 / 16%);
  --accent-ink: #2b0810;
  --accent-line: rgb(242 96 122 / 44%);

  --p-a: #5fc9c9;
  --p-a-soft: rgb(95 201 201 / 16%);
  --p-b: #f7a8c8;
  --p-b-soft: rgb(247 168 200 / 16%);

  --ok: #5fcaa1;
  --ok-soft: rgb(95 202 161 / 16%);
  --warn: #e0b15c;
  --warn-soft: rgb(224 177 92 / 16%);
  --danger: #f2726e;
  --danger-soft: rgb(242 114 110 / 16%);

  --shadow-1: none;
  --shadow-2: none;
  --scrim: rgb(14 6 10 / 66%);
}

/* --- compatibility aliases ----------------------------------------------------
 * v1 names, mapped onto the palette above. Screens written against these — the
 * whole admin panel, the chart layer, a few couple-facing leftovers — pick up the
 * new colours for free. Prefer the --ink/--bg-N/--accent names in new code.
 */
:root {
  --text: var(--ink);
  --hint: var(--ink-3);
  --card: var(--bg-2);
  --link: var(--accent);
  --rose: var(--accent);
  --rose-soft: var(--accent-soft);
  --rose-strong: var(--accent);
  --gold: var(--warn);
  --gold-soft: var(--warn-soft);
}