/* Tokens. Layout concept: one phone-sized app, grouped iOS surfaces, floating glass bars.
   Every colour resolves --tg-theme-* first, so the kit follows the Telegram theme automatically.
   --sys-* are the iOS system values used when the app runs outside Telegram. */
:root {
  --sys-bg: #f2f2f7;
  --sys-card: #ffffff;
  --sys-text: #000000;
  --sys-hint: rgba(60, 60, 67, .62);
  --sys-sep: rgba(60, 60, 67, .16);
  --sys-accent: #007aff;
  --sys-header: #f7f7f9;
  --fill: rgba(120, 120, 128, .12);
  --fill-strong: rgba(120, 120, 128, .2);
  --glass-tint: rgba(255, 255, 255, .62);
  --glass-edge: rgba(255, 255, 255, .7);
  --glass-line: rgba(0, 0, 0, .05);
  --lens: rgba(120, 120, 128, .14);
  --thumb: #ffffff;
  --thumb-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 3px 8px rgba(0, 0, 0, .12);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  --card-glow: 22%;
  --coin-edge: rgba(0, 0, 0, .07);
  --float-shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .05);
  --sheet-shadow: 0 -2px 30px rgba(0, 0, 0, .14);
  --scrim: rgba(0, 0, 0, .28);
  --page: #e6e7eb;
  --green: #17873a;
  --red: #d7281e;
  --green-fill: #1fa84a;
  --red-fill: #ec3a30;
  --green-soft: rgba(36, 170, 80, .13);
  --red-soft: rgba(236, 58, 48, .11);
  --orange: #f08a00;

  --bg: var(--tg-theme-secondary-bg-color, var(--sys-bg));
  --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, var(--sys-card)));
  --text: var(--tg-theme-text-color, var(--sys-text));
  --hint: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, var(--sys-hint)));
  --sep: var(--tg-theme-section-separator-color, var(--sys-sep));
  --accent: var(--tg-theme-button-color, var(--sys-accent));
  --on-accent: var(--tg-theme-button-text-color, #ffffff);
  --link: var(--tg-theme-accent-text-color, var(--tg-theme-link-color, var(--sys-accent)));
  --header: var(--tg-theme-header-bg-color, var(--sys-header));
  --danger: var(--tg-theme-destructive-text-color, var(--red));

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: var(--ease-out);

  --r-card: 22px;
  --r-group: 20px;
  --r-field: 14px;
  --gutter: 16px;

  /* The artifact build sets these to 0: its skeleton already pads :root by the insets. */
  --env-top: env(safe-area-inset-top, 0px);
  --env-bottom: env(safe-area-inset-bottom, 0px);
  --env-left: env(safe-area-inset-left, 0px);
  --env-right: env(safe-area-inset-right, 0px);
  --safe-top: calc(max(var(--env-top), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(var(--env-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --safe-left: max(var(--env-left), var(--tg-safe-area-inset-left, 0px));
  --safe-right: max(var(--env-right), var(--tg-safe-area-inset-right, 0px));
}

@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .012, .048 2.6%, .19 5.6%, .69 13.1%, .87 16.6%, 1.002 20.3%, 1.052 22.6%, 1.087 25.1%, 1.104 27.8%, 1.104 30.6%, 1.054 37.6%, 1.012 44%, .994 50.4%, .99 56%, 1.001 77.5%, 1);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sys-bg: #000000;
    --sys-card: #1c1c1e;
    --sys-text: #ffffff;
    --sys-hint: rgba(235, 235, 245, .6);
    --sys-sep: rgba(84, 84, 88, .55);
    --sys-accent: #0a84ff;
    --sys-header: #1c1c1e;
    --fill: rgba(120, 120, 128, .24);
    --fill-strong: rgba(120, 120, 128, .36);
    --glass-tint: rgba(44, 44, 48, .58);
    --glass-edge: rgba(255, 255, 255, .14);
    --glass-line: rgba(255, 255, 255, .06);
    --lens: rgba(255, 255, 255, .13);
    --thumb: #f4f4f6;
    --thumb-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 3px 8px rgba(0, 0, 0, .4);
    --card-shadow: none;
    --card-glow: 0%;
    --coin-edge: rgba(255, 255, 255, .16);
    --float-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --sheet-shadow: 0 -2px 30px rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .5);
    --page: #101012;
    --green: #30d158;
    --red: #ff5a4f;
    --green-fill: #28b84f;
    --red-fill: #f0413a;
    --green-soft: rgba(48, 209, 88, .16);
    --red-soft: rgba(255, 90, 79, .16);
    --orange: #ff9f0a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sys-bg: #000000;
  --sys-card: #1c1c1e;
  --sys-text: #ffffff;
  --sys-hint: rgba(235, 235, 245, .6);
  --sys-sep: rgba(84, 84, 88, .55);
  --sys-accent: #0a84ff;
  --sys-header: #1c1c1e;
  --fill: rgba(120, 120, 128, .24);
  --fill-strong: rgba(120, 120, 128, .36);
  --glass-tint: rgba(44, 44, 48, .58);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-line: rgba(255, 255, 255, .06);
  --lens: rgba(255, 255, 255, .13);
  --thumb: #f4f4f6;
  --thumb-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 3px 8px rgba(0, 0, 0, .4);
  --card-shadow: none;
  --card-glow: 0%;
  --coin-edge: rgba(255, 255, 255, .16);
  --float-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --sheet-shadow: 0 -2px 30px rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .5);
  --page: #101012;
  --green: #30d158;
  --red: #ff5a4f;
  --green-fill: #28b84f;
  --red-fill: #f0413a;
  --green-soft: rgba(48, 209, 88, .16);
  --red-soft: rgba(255, 90, 79, .16);
  --orange: #ff9f0a;
}

:root[data-theme="light"] { color-scheme: light; }