@import "tailwindcss";

@font-face {
  font-family: "Vazir";
  src: url("/fonts/vazir/Vazir.woff2") format("woff2"),
    url("/fonts/vazir/Vazir.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Vazir";
  src: url("/fonts/vazir/Vazir-Bold.woff2") format("woff2"),
    url("/fonts/vazir/Vazir-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

:root {
  --tg-bg-color: #eef4fb;
  --tg-text-color: #0f172a;
  --tg-hint-color: #64748b;
  --tg-button-color: #2ea6ff;
  --tg-button-text-color: #ffffff;

  --brand-blue: #2ea6ff;
  --brand-blue-strong: #1282ef;
  --brand-ink: #0f172a;
  --brand-text: #0f172a;
  --brand-muted: #64748b;
  --brand-surface: rgba(255, 255, 255, 0.86);
  --brand-surface-strong: rgba(255, 255, 255, 0.95);
  --brand-border: rgba(15, 23, 42, 0.08);
  --brand-bg: #eef4fb;

  --bg: var(--tg-bg-color);
  --fg: var(--tg-text-color);
  --muted: var(--tg-hint-color);

  --card: var(--brand-surface);
  --card-strong: var(--brand-surface-strong);
  --card-border: var(--brand-border);
  --shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.06);
}

html,
body {
  height: 100%;
}

body {
  font-family: "Vazir", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(900px 640px at 14% -12%, rgba(46, 166, 255, 0.22), transparent 58%),
    radial-gradient(760px 640px at 112% 0%, rgba(18, 130, 239, 0.16), transparent 58%),
    radial-gradient(900px 700px at 50% 118%, rgba(46, 166, 255, 0.12), transparent 58%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 46%, #e8f0fb 100%);
  color: var(--brand-text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

html {
  background: var(--brand-bg);
  color: var(--brand-text);
  overflow-x: hidden;
}

.tg-safe {
  /* helps when Telegram sets safe area insets */
  padding-bottom: env(safe-area-inset-bottom);
}

button,
input,
textarea,
select {
  font: inherit;
}

::selection {
  background: rgba(46, 166, 255, 0.22);
  color: var(--brand-ink);
}

/* Hide scrollbar for horizontal scrolling */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}