/*
 * @cfm/client-tg — design tokens + self-hosted typeface ("Лаконичный свет").
 *
 * The founder-approved visual identity (Checkpoint 1, 2026-07-06):
 *   - Direction "Лаконичный свет" (Laconic Light): high contrast, large type,
 *     sharp corners (~8/6px radii), cobalt accent #2440FF, on a warm off-white.
 *   - Typeface IBM Plex Sans (400/600/700) for text + IBM Plex Mono (500) for
 *     numerals / IBAN / requisites.
 *
 * 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.
 *
 * This file is intended to become the canonical @cfm/ui-tokens sheet shared by
 * all three consoles; for Stage 1 it lives with the client and is extracted to
 * a shared package (with a byte-equality sync guard) when the provider/ops
 * consoles adopt it.
 */

/* ------------------------------------------------------------------ *
 * IBM Plex Sans — 400 / 600 / 700, latin + cyrillic subsets.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "PlexSans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/plexsans-lat-400.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: "PlexSans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/plexsans-cyr-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PlexSans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/plexsans-lat-600.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: "PlexSans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/plexsans-cyr-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PlexSans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/plexsans-lat-700.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: "PlexSans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/plexsans-cyr-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

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

@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;
}

/* ------------------------------------------------------------------ *
 * Design tokens — "Лаконичный свет" (light). Dark derives from Telegram
 * themeParams in a later Stage-1 sub-task; the app is pinned to light here so
 * it matches the approved mockup regardless of the OS colour-scheme.
 * ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Surfaces + ink */
  --bg: #f4f4f1; /* page */
  --s1: #ffffff; /* raised card */
  --s2: #ededea; /* inset / quiet chip */
  --ink: #0a0a0a; /* primary text */
  --muted: #5e5e5b; /* secondary text */
  --faint: #9a9a95; /* tertiary text */
  --line: #e4e3de; /* hairline borders */

  /* Cobalt accent + semantic */
  --accent: #2440ff;
  --on: #ffffff; /* text on accent */
  --asoft: #eaedff; /* accent wash */
  --aink: #1a2fbf; /* accent text on wash */
  --pos: #137a41; /* positive / best */
  --warn: #8a5a18; /* caution */
  --danger: #b3261e; /* error / stop */

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

  /* Radii — sharp corners are part of the identity */
  --r-lg: 8px;
  --r-md: 6px;
  --r-pill: 999px;

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

/* ------------------------------------------------------------------ *
 * Dark theme — a designed dark "Лаконичный свет" (cobalt kept). Applied by
 * app.js as html.theme-dark ONLY when Telegram reports colorScheme "dark";
 * the plain-browser stand has no Telegram and stays light, matching the
 * approved mockup. Higher specificity (:root.theme-dark) overrides the light
 * tokens above, so every var(--…) consumer adapts with no per-component work.
 * ------------------------------------------------------------------ */

:root.theme-dark {
  color-scheme: dark;

  --bg: #0f1116;
  --s1: #1a1d24;
  --s2: #252932;
  --ink: #eceef2;
  --muted: #9aa1ab;
  --faint: #697080;
  --line: #2b303a;

  --accent: #4c63ff;
  --on: #ffffff;
  --asoft: #1d2440;
  --aink: #9db0ff;
  --pos: #3ecf7a;
  --warn: #d6a24e;
  --danger: #ef6a5f;
}