/* 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.
 *
 * Telegram supplies its own theme variables to a Mini App; where it does, we
 * follow them, and where it does not we fall back to our own. That is why every
 * surface colour below is written as var(--tg-theme-*, <ours>).
 */

:root {
  /* --- canvas and surfaces ------------------------------------------- */
  --bg: var(--tg-theme-secondary-bg-color, #f2f2f6);
  --surface: var(--tg-theme-bg-color, #ffffff);
  --surface-2: #f7f7fa;
  --surface-sunken: #ececf1;

  /* --- ink ------------------------------------------------------------ */
  --ink: var(--tg-theme-text-color, #0b0b10);
  --ink-2: #53535e;
  --ink-3: var(--tg-theme-hint-color, #8b8b96);
  --ink-inverse: #ffffff;

  /* --- accent --------------------------------------------------------- */
  --accent: var(--tg-theme-button-color, #6c4cf1);
  --accent-ink: var(--tg-theme-button-text-color, #ffffff);
  --accent-soft: #ede9fe;
  --accent-2: #9a6cff;
  --gradient: linear-gradient(135deg, #6c4cf1 0%, #9a6cff 46%, #55b8ff 100%);
  --gradient-warm: linear-gradient(135deg, #ff8a3d 0%, #ff5d8f 100%);

  /* --- semantic ------------------------------------------------------- */
  --done: #12b76a;
  --done-soft: #d6f6e6;
  --wait: #f79009;
  --wait-soft: #fdf0d5;
  --stop: #f04438;
  --stop-soft: #ffe4e1;
  --info: #2e90fa;
  --info-soft: #dbeeff;

  /* --- lines ---------------------------------------------------------- */
  --line: #e7e7ee;
  --line-strong: #d7d7e1;

  /* --- radius --------------------------------------------------------- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- shadow --------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(15, 15, 30, 0.04), 0 2px 8px rgba(15, 15, 30, 0.04);
  --sh-2: 0 2px 4px rgba(15, 15, 30, 0.04), 0 12px 28px rgba(15, 15, 30, 0.08);
  --sh-3: 0 8px 20px rgba(15, 15, 30, 0.1), 0 24px 56px rgba(15, 15, 30, 0.14);
  --sh-accent: 0 8px 24px rgba(108, 76, 241, 0.32);

  /* --- 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;
  --nav-h: 76px;

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-secondary-bg-color, #0d0d12);
    --surface: var(--tg-theme-bg-color, #17171f);
    --surface-2: #1e1e28;
    --surface-sunken: #23232f;

    --ink: var(--tg-theme-text-color, #f4f4f7);
    --ink-2: #b6b6c2;
    --ink-3: var(--tg-theme-hint-color, #82828f);

    --accent-soft: #241d44;

    --done-soft: #10352a;
    --wait-soft: #3a2a10;
    --stop-soft: #3c1a1a;
    --info-soft: #11283f;

    --line: #2a2a36;
    --line-strong: #3a3a49;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.5);
    --sh-3: 0 8px 20px rgba(0, 0, 0, 0.55), 0 24px 56px 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;
  }
}