/*
 * 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).
 *
 * Light is the reference palette (unchanged). A dark palette is defined at
 * the bottom of this file under [data-theme="dark"]; js/theme.js decides which
 * one is active (auto = follow Telegram / system, or the user's manual
 * choice stored in localStorage "gs_theme"). Hardcoded colors that cannot be
 * expressed through these tokens are overridden in css/theme.css.
 */

/* Self-hosted Vazirmatn (variable, Persian + Latin subset, ~75 KB, all
   weights 100-900 in one file). It used to come from Google Fonts, which
   meant a render-blocking stylesheet plus two extra connections to Google
   hosts BEFORE the first paint — slow on Iranian networks and the main
   reason the Mini App felt heavy to open. Preloaded from index.html. */
@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

: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;
  /* 60px -> 66px so the (now larger) brand logo in the app bar has room to
     breathe; every screen's content offset follows this token. */
  --header-height: 66px;
  --footer-height: 92px;
  --tabbar-height: 44px;
  /* Distance from the screen edge to the floating tab bar. */
  --tabbar-bottom: 28px;
  /* Gap between the sticky price-dock and the tab bar beneath it. */
  --dock-gap: 4px;

  /* 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: #ffffff;
  --c-bg-gradient: #ffffff;

  --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;
  /* Canonical "selected" look, used everywhere something can be picked
     (service switcher, stars presets, gift cards, premium plans): one
     light tint + one soft border, both the same blue as --c-primary, so
     the whole purchase flow reads as a single consistent style instead of
     each screen inventing its own shade/opacity. */
  --select-bg: rgba(0, 152, 234, 0.08);
  --select-border: rgba(0, 152, 234, 0.25);
  /* Telegram sky-blue gradient family (the original button look, kept) */
  --brand-azure: #0a8bf0;
  --brand-blue: #0284c7;
  --brand-deep: #0369a1;
  --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-shadow was too faint (0.07 alpha) to read against the white/
     light-tinted panels most cards sit on, so every "card" on the select
     screen (service switcher, premium/stars/gift panels, gift cards,
     plan cards) looked flat/shadowless. Raised alpha + a touch more
     spread so the shadow is actually visible as a soft lift, not just on
     paper. --glass-shadow-float (the "selected/elevated" variant) is
     left as-is — it was already strong enough. */
  --glass-blur: blur(28px) saturate(190%);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 10px 28px 0 rgba(31, 38, 135, 0.14);
  --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);

  /* Bottom bars (tab bar, price dock, action dock): solid white so icons,
     labels and the price text stay fully legible over any content
     scrolling behind them (no blur / translucency). */
  --glass-bar-bg: #ffffff;
  --glass-bar-blur: none;
  --glass-bar-border: #e9edf2;
}

/* ------------------------------------------------------------------
 * Dark palette. Activated by js/theme.js via <html data-theme="dark">.
 * Only the tokens change — the light palette above is untouched.
 * ------------------------------------------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --c-background: #0b1220;
  --c-bg-gradient: #0b1220;

  --c-surface: #131c2e;
  --c-surface-bright: #1a2438;
  --c-surface-dim: #0f1726;
  --c-surface-container-lowest: #101a2b;
  --c-surface-container-low: rgba(26, 36, 56, 0.72);
  --c-surface-container: rgba(26, 36, 56, 0.88);
  --c-surface-container-high: rgba(32, 44, 68, 0.94);
  --c-surface-container-highest: #223049;

  --c-on-surface: #e6edf7;
  --c-on-surface-variant: #9fb0c8;
  --c-inverse-surface: #e6edf7;
  --c-inverse-on-surface: #0f172a;

  --c-outline: #5b6b84;
  --c-outline-variant: #26334a;

  --c-primary: #2ab0ff;
  --c-on-primary: #ffffff;
  --c-primary-container: #38b6ff;
  --c-on-primary-container: #04121f;
  --c-primary-fixed: #0c2a42;
  --select-bg: rgba(42, 176, 255, 0.14);
  --select-border: rgba(42, 176, 255, 0.4);
  --brand-azure: #2ab0ff;
  --brand-blue: #1d9bf0;
  --brand-deep: #7cc9ff;
  --c-primary-gradient: linear-gradient(to left, #0098ea, #0284c7, #0369a1);

  --c-secondary: #9fb0c8;
  --c-on-secondary: #0f172a;
  --c-secondary-container: #26334a;
  --c-on-secondary-container: #c3d0e3;

  --c-tertiary: #34d399;
  --c-on-tertiary: #052e1c;
  --c-tertiary-container: #10b981;
  --c-on-tertiary-container: #f0fdf4;

  --c-error: #f87171;
  --c-on-error: #3b0a0a;
  --c-error-container: #4a1717;
  --c-on-error-container: #fecaca;

  --c-on-background: #e6edf7;
  --c-surface-variant: #223049;

  --c-scrim: rgba(0, 0, 0, 0.6);

  --glass-border: rgba(148, 163, 184, 0.16);
  --glass-shadow: 0 10px 28px 0 rgba(0, 0, 0, 0.45);
  --glass-shadow-float: 0 20px 48px -8px rgba(0, 0, 0, 0.6), 0 1px 1px 0 rgba(255, 255, 255, 0.05) inset;
  --glow-sky: 0 10px 28px -4px rgba(0, 152, 234, 0.45);

  --glass-bar-bg: #111a2b;
  --glass-bar-blur: none;
  --glass-bar-border: #1f2c43;
}