/*
 * Design tokens — colors, typography scale, spacing, radii.
 * Source: "stitch" minimalist Telegram checkout reference — a fixed light
 * "liquid glass" look (frosted white cards over a soft sky-blue backdrop).
 *
 * Unlike the previous version, this palette is intentionally NOT synced to
 * Telegram's light/dark theme params — the reference design has no dark
 * variant, and the whole point of this pass was to match it exactly. See
 * js/lib/telegram.js, which no longer repaints these variables at runtime.
 */

:root {
  /* ---- Typography scale ---- */
  --font-family: "Vazirmatn", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-headline-lg: 800 28px/38px var(--font-family);
  --text-headline-lg-mobile: 800 24px/34px var(--font-family);
  --text-headline-md: 800 20px/28px var(--font-family);
  --text-headline-sm: 700 17px/26px var(--font-family);
  --text-body-lg: 400 16px/26px var(--font-family);
  --text-body-md: 400 14px/22px var(--font-family);
  --text-body-sm: 400 13px/20px var(--font-family);
  --text-label-lg: 700 15px/22px var(--font-family);
  --text-label-md: 600 13px/18px var(--font-family);
  --text-label-sm: 600 11px/16px var(--font-family);

  /* ---- Radii (rounder, "glass" softness) ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.875rem;
  --space-lg: 1.25rem;
  --space-xl: 1.75rem;
  --gutter: 0.75rem;
  --margin: 1rem;

  /* ---- Layout ---- */
  /* Full-bleed: no centered/capped column (kept from the previous pass —
     the app fills the whole Mini App viewport, including on Telegram
     Desktop's wider webview panel). */
  --app-max-width: none;
  --header-height: 60px;
  --footer-height: 92px;
  --tabbar-height: 76px;
  /* Gap between the sticky price-dock and the tab bar beneath it. */
  --dock-gap: 8px;

  /* Filled in at runtime by js/lib/telegram.js from Telegram's reported
     safe-area insets (device notch/status bar + fullscreen chrome). Stay
     at 0 until then, so nothing shifts for clients that never report it. */
  --tg-safe-area-top: 0px;
  --tg-safe-area-bottom: 0px;

  /* ---- Glass surface palette (fixed — see note above) ---- */
  --c-background: #eef3f8;
  --c-bg-gradient: linear-gradient(to bottom, #f0f5fa, #f5f8fc, #e9f0f8);

  --c-surface: #eef3f8;
  --c-surface-bright: #ffffff;
  --c-surface-dim: #e2e8f0;
  --c-surface-container-lowest: #ffffff;
  --c-surface-container-low: rgba(255, 255, 255, 0.7);
  --c-surface-container: rgba(255, 255, 255, 0.85);
  --c-surface-container-high: rgba(255, 255, 255, 0.92);
  --c-surface-container-highest: #eef2f7;

  --c-on-surface: #0f172a;
  --c-on-surface-variant: #64748b;
  --c-inverse-surface: #1e293b;
  --c-inverse-on-surface: #f8fafc;

  --c-outline: #94a3b8;
  --c-outline-variant: #e2e8f0;

  /* Telegram sky-blue gradient family */
  --c-primary: #0098ea;
  --c-on-primary: #ffffff;
  --c-primary-container: #0284c7;
  --c-on-primary-container: #ffffff;
  --c-primary-fixed: #e0f2fe;
  --c-primary-gradient: linear-gradient(to left, #0098ea, #0284c7, #0369a1);

  --c-secondary: #64748b;
  --c-on-secondary: #ffffff;
  --c-secondary-container: #e2e8f0;
  --c-on-secondary-container: #475569;

  --c-tertiary: #059669;
  --c-on-tertiary: #ffffff;
  --c-tertiary-container: #10b981;
  --c-on-tertiary-container: #f0fdf4;

  --c-error: #ef4444;
  --c-on-error: #ffffff;
  --c-error-container: #fee2e2;
  --c-on-error-container: #991b1b;

  --c-on-background: #0f172a;
  --c-surface-variant: #eef2f7;

  --c-scrim: rgba(15, 23, 42, 0.4);

  /* ---- Glass effect helpers ---- */
  --glass-blur: blur(28px) saturate(190%);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  --glass-shadow-float: 0 20px 48px -8px rgba(15, 23, 42, 0.12), 0 1px 1px 0 rgba(255, 255, 255, 0.8) inset;
  --glow-sky: 0 10px 28px -4px rgba(0, 152, 234, 0.4);

  /* Frosted-glass bars (top app bar, bottom action/price docks, tab bar):
     one shared recipe so they all read as the same material. */
  --glass-bar-bg: rgba(255, 255, 255, 0.6);
  --glass-bar-blur: blur(16px);
  --glass-bar-border: rgba(255, 255, 255, 0.4);
}

/* data-theme is still set (telegram.js keeps doing this for anything that
   reads it), but both variants resolve to the same fixed glass palette on
   purpose — see the file header note. */
[data-theme="light"],
[data-theme="dark"] {
  --c-background: #eef3f8;
}