/* Design tokens.
 *
 * One place for colour, type, spacing, radius and shadow. A value that appears
 * in a component file is a value somebody will have to hunt for later.
 *
 * Dark mode is `data-theme` on <html>, set by the client from Telegram's
 * `colorScheme` inside a Mini App and from `prefers-color-scheme` outside one.
 * It is not a media query, because inside Telegram those two disagree: the
 * app reports a dark theme through its own variables while the WebView still
 * says the system is light.
 *
 * Six tokens used to read `var(--tg-theme-*, <ours>)` so the Mini App would
 * wear the user's Telegram colours. The other twenty did not, and could not —
 * Telegram publishes a background and a text colour, not a semantic palette.
 * So a dark Telegram theme gave dark surfaces and light text from Telegram
 * and light everything else from here: a selected consent card came out pale
 * with pale text on it, which is how a user found this. Mixing two palettes
 * cannot be made coherent, and it also made the contrast test meaningless —
 * it measured fallbacks that the Mini App never used. We own the palette now
 * and take only the light-or-dark decision from Telegram.
 *
 * The palette comes from the timeline mockup: a white canvas with grey panels,
 * which is the inverse of the slate canvas this file carried before. Every
 * pair below was measured rather than eyeballed — the two that do not reach
 * 4.5:1 are a hairline separator and the border of a marker that is also
 * identified by its fill and its icon, and neither is text.
 *
 * Fonts: the mockup asks for Inter. We ship the system stack. A webfont is
 * either a third-party request from the user's device — which the privacy
 * policy says does not happen — or ~200 KB self-hosted inside an APK whose
 * whole point is that it is small, and the system stack resolves to SF Pro on
 * iOS and Roboto on Android.
 */

:root {
  /* --- canvas and surfaces ------------------------------------------- */
  /* The page is white and the panels are grey, not the other way round. A
     card therefore carries no shadow: it is told apart by its fill. */
  --bg: #ffffff;
  --surface: #f6f6f8;
  --surface-2: #ffffff;
  --surface-sunken: #ececf0;

  /* --- ink ------------------------------------------------------------ */
  --ink: #0c0c0c;
  --ink-2: #3a3a42;
  --ink-3: #6b6b75;
  --ink-inverse: #ffffff;

  /* --- accent --------------------------------------------------------- */
  /* Swap these to re-accent the product; nothing else names a violet. */
  --accent: #684cfc;
  --accent-ink: #ffffff;
  --accent-strong: #5238e0;
  --accent-soft: #ece8fc;
  --accent-2: #8b74ff;
  --accent-rgb: 104, 76, 252;
  --gradient: linear-gradient(146deg, #8b74ff 0%, #684cfc 52%, #5238e0 100%);
  --gradient-warm: linear-gradient(135deg, #ff8a3d 0%, #ff5d8f 100%);

  /* --- semantic ------------------------------------------------------- */
  /* The timeline marks a finished step in the accent, not in green — green
     is left for the places that mean "good" rather than "done". */
  --done: #10b981;
  --done-soft: #d7f5e9;
  --done-ink: #047857;
  --wait: #d9861a;
  --wait-soft: #fff1dc;
  --wait-ink: #9a5200;
  --stop: #e5484d;
  --stop-soft: #ffe8e8;
  --stop-ink: #b4262b;
  --info: #684cfc;
  --info-soft: #ece8fc;
  --info-ink: #4a2fd0;

  /* --- lines ---------------------------------------------------------- */
  --line: #e4e4e8;
  --line-strong: #d3d3da;

  /* --- radius --------------------------------------------------------- */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- shadow --------------------------------------------------------- */
  /* Sparingly. A grey panel on a white page needs no lift; only the things
     that genuinely float have one. */
  --sh-1: none;
  --sh-2: 0 6px 16px rgba(12, 12, 12, 0.1);
  --sh-3: 0 8px 24px rgba(12, 12, 12, 0.18);
  --sh-accent: 0 6px 16px rgba(var(--accent-rgb), 0.35);

  /* --- type ----------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: var(--font);

  /* --- spacing -------------------------------------------------------- */
  --gap: 12px;
  --pad: 16px;
  /* The bar plus the room a screen reserves for it. The action in the
     middle carries a label now, which made the bar taller than the number
     that was supposed to describe it — the clearance test caught it. */
  /* Five labelled slots and no floating action button. It was 96px when a 48px
     pill sat in the middle of the bar; measured against the rendered bar by
     tests/e2e/test_layout_in_every_language.py, which fails if a screen ends
     underneath it. */
  --nav-h: 84px;

  /* --- motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms;
  --slow: 320ms;
}

:root[data-theme="dark"] {
  --bg: #0e0e12;
  --surface: #1a1a20;
  --surface-2: #23232a;
  --surface-sunken: #2a2a31;

  --ink: #f5f5f7;
  --ink-2: #c7c7ce;
  --ink-3: #9a9aa4;

  /* #684CFC reaches only 3.3:1 against a dark panel, so as *text* the
     accent moves up a step — and white then fails on that lighter violet,
     which is why the ink on it goes dark rather than staying white. */
  --accent: #8b74ff;
  --accent-ink: #12101f;
  --accent-strong: #a191ff;
  --accent-soft: #241c4a;
  --info: #8b74ff;
  --info-soft: #241c4a;
  --info-ink: #c3b6ff;

  --done-soft: #0d3a2c;
  --done-ink: #4ade9f;
  --wait-soft: #3a2a10;
  --wait-ink: #f0b265;
  --stop-soft: #3c1a1a;
  --stop-ink: #ff9a9a;

  --line: #2a2a31;
  --line-strong: #3a3a44;

  --sh-1: none;
  --sh-2: 0 6px 16px rgba(0, 0, 0, 0.5);
  --sh-3: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Motion is decoration. Somebody who has turned it off has said so. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 0ms;
    --slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}