/*
 * @cfm/client-tg — design tokens + self-hosted typeface ("Спектр").
 *
 * The founder-approved client identity (2026-07-17), replacing "Лаконичный
 * свет" for THIS surface only (the provider/ops consoles still carry the older
 * light identity and converge later):
 *
 *   - DARK-FIRST and dark-only. A near-black ground (#08080a — never pure
 *     black, which fatigues at length), depth from progressively lighter
 *     surfaces + hairlines rather than shadows, off-white ink (#f2f2f0) rather
 *     than pure white. The app commits to this look instead of deriving from
 *     Telegram's themeParams; app.js paints Telegram's own chrome to match via
 *     setHeaderColor/setBackgroundColor and keeps it in step on themeChanged.
 *   - GENEROUS radii (22/16px) — the Silk Bank reference.
 *   - ONE identity palette (--mark-1..6). "Спектр" means: colour encodes
 *     BELONGING and nothing else. It appears in exactly three places — a
 *     provider's monogram mark, a payment method's underline, and the border of
 *     the offer you picked. Everything else is monochrome and the single action
 *     colour is white. Semantic colour (--pos/--warn/--danger) is a separate
 *     system and is never used as an accent.
 *   - Typeface Golos Text (variable 400..900) for text — an expert-vetted
 *     Cyrillic face (the Cyrillic of most free grotesques, Inter and Manrope
 *     included, is not) whose heavy weights carry the large-amount hero. IBM
 *     Plex Mono stays for requisites/IBAN, where a monospace is load-bearing.
 *
 * FONTS ARE SELF-HOSTED. The .woff2 files in ./fonts are fontsource subsets
 * (latin + cyrillic) committed into the repo — the ONLY sanctioned external
 * script in this app is telegram.org/js/telegram-web-app.js; everything else,
 * fonts included, is served from our own origin. Each face is split into a
 * latin and a cyrillic subset with a unicode-range so the browser fetches only
 * the subset a glyph needs.
 */

/* ------------------------------------------------------------------ *
 * Golos Text — one variable file per subset, weights 400..900.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "Golos";
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/golos-lat-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos";
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/golos-cyr-var.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ------------------------------------------------------------------ *
 * IBM Plex Mono — 500, for requisites / IBAN / reference strings.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "PlexMono";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/plexmono-lat-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PlexMono";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/plexmono-cyr-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ------------------------------------------------------------------ *
 * Tokens — "Спектр". Dark is the only theme: it is the design, not a
 * derived variant, so there is no light block to drift out of sync.
 * ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* Surfaces — a 4-step ladder; each step reads as "closer to the viewer". */
  --bg: #08080a; /* page ground */
  --s1: #131316; /* card */
  --s2: #1c1c21; /* inset inside a card */
  --s3: #26262c; /* chip on an inset */

  /* Ink */
  --ink: #f2f2f0; /* primary text (off-white, faintly warm) */
  --muted: #92929b; /* secondary text */
  --faint: #5c5c66; /* tertiary text, icons at rest */

  /* Hairlines carry the depth that shadows cannot on a near-black ground. */
  --line: rgba(255, 255, 255, 0.06);
  --line2: rgba(255, 255, 255, 0.13);

  /* The single action colour is white; there is no coloured "brand" accent. */
  --accent: #f2f2f0;
  --on: #0a0a0c; /* text on --accent */
  --asoft: rgba(255, 255, 255, 0.08); /* quiet wash (chips, selected states) */
  --aink: #f2f2f0; /* text on --asoft */

  /* Semantic — a separate system from the identity palette below. */
  --pos: #4ade80;
  --warn: #f0b849;
  --danger: #ff6b6b;

  /* Identity palette ("Спектр"): colour = belonging. One lightness band, so a
     near-black glyph stays legible on every one of them. */
  --mark-1: #ffb84d;
  --mark-2: #7aa2ff;
  --mark-3: #b98cff;
  --mark-4: #5ddc93;
  --mark-5: #ff8f6b;
  --mark-6: #f0a5d0;
  --mark-ink: #101012; /* the monogram letter on any --mark-* */

  /* Payment methods draw from the same palette — the method underline. */
  --m-cash: var(--mark-1);
  --m-bank: var(--mark-2);
  --m-qr: var(--mark-3);

  /* Type */
  --ff: "Golos", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "PlexMono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Radii — generous (Silk); crispness comes from the hairline, not the curve */
  --r-lg: 22px;
  --r-md: 14px;
  --r-btn: 18px;
  --r-pill: 999px;

  /* Spacing scale. Hierarchy, not one flat rhythm: --m binds a footnote to the
     number above it, --l is the working rhythm, --xxl breaks a group. */
  --s: 4px;
  --m: 8px;
  --l: 12px;
  --xl: 16px;
  --xxl: 24px;
  --xxxl: 32px;

  /* Layout: a phone-width column, centred on wide viewports */
  --col: 440px;
}