/* Pelle Exchange — design tokens for the customer bot Mini App and the admin Mini App.
   Derived from the site theme in admin_web/static/pelle-ui.css (brand hue 189, accent 26).
   Buy/sell semantics are kept from admin_web/static/exchange.css.
   Do not hard-code colors in components; use these tokens. */

:root {
  /* brand (site) */
  --xp-h: 189;
  --xp-s: 72%;
  --xp-primary: hsl(var(--xp-h) var(--xp-s) 32%);       /* = site --p-600 */
  --xp-primary-hover: hsl(var(--xp-h) var(--xp-s) 25%); /* = site --p-700 */
  --xp-primary-ink: #ffffff;
  --xp-soft: hsl(var(--xp-h) var(--xp-s) 97%);          /* = site --p-50 */
  --xp-accent: hsl(26 92% 53%);                         /* = site --a-500, primary CTA and highlights only */

  /* neutrals (site --n-*) */
  --xp-bg: hsl(189 14% 98%);
  --xp-surface: #ffffff;
  --xp-text: hsl(189 14% 12%);
  --xp-muted: hsl(189 14% 40%);
  --xp-line: hsl(189 14% 88% / 0.9);

  /* trading semantics (from exchange.css) */
  --xp-buy: #0f7a4f;
  --xp-buy-bg: #e6f6ee;
  --xp-sell: #b4232c;
  --xp-sell-bg: #fdecee;
  --xp-warn-bg: #fff4e0;
  --xp-warn-ink: #92400e;
  --xp-danger: hsl(4 58% 42%);                          /* site --ui-danger: errors and logout only */

  /* glass (site --glass-*) */
  --xp-glass: hsl(0 0% 100% / 0.62);
  --xp-glass-strong: hsl(0 0% 100% / 0.82);

  /* shape and layout (named, adjustable) */
  --xp-radius-sm: 10px;
  --xp-radius: 14px;
  --xp-radius-lg: 22px;
  --xp-gap: 12px;
  --xp-pad: 16px;
  --xp-tap-min: 44px;                                   /* minimum touch target */
  --xp-sheet-max-h: 88vh;
  --xp-tab-h: 64px;

  /* type */
  --xp-font: "Vazirmatn", system-ui, sans-serif;
  --xp-font-num: system-ui, -apple-system, "Segoe UI", Roboto, "Vazirmatn", sans-serif;   /* ارقام لاتین با فونت بومی دستگاه */
  --xp-text-body: 15px;
  --xp-text-title: 20px;
  --xp-text-display: 30px;
  --xp-leading-body: 1.6;
  --xp-leading-title: 1.25;

  /* motion (Apple springs mapped to durations for CSS fallbacks) */
  --xp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --xp-press-scale: 0.97;
  --xp-dur-press: 100ms;
  --xp-dur-fade: 200ms;
}

:root[data-theme="dark"] {
  --xp-bg: hsl(189 30% 7%);
  --xp-surface: hsl(189 26% 11%);
  --xp-text: hsl(189 20% 94%);
  --xp-muted: hsl(189 14% 62%);
  --xp-line: hsl(189 20% 22% / 0.8);
  --xp-buy-bg: hsl(152 45% 14%);
  --xp-sell-bg: hsl(4 45% 16%);
  --xp-soft: hsl(189 40% 14%);
  --xp-glass: hsl(189 26% 11% / 0.6);
  --xp-glass-strong: hsl(189 26% 11% / 0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --xp-bg: hsl(189 30% 7%);
    --xp-surface: hsl(189 26% 11%);
    --xp-text: hsl(189 20% 94%);
    --xp-muted: hsl(189 14% 62%);
    --xp-line: hsl(189 20% 22% / 0.8);
    --xp-buy-bg: hsl(152 45% 14%);
    --xp-sell-bg: hsl(4 45% 16%);
    --xp-soft: hsl(189 40% 14%);
    --xp-glass: hsl(189 26% 11% / 0.6);
    --xp-glass-strong: hsl(189 26% 11% / 0.85);
  }
}

/* Reduced motion and transparency: Apple guidance, section 14 of the design skill */
@media (prefers-reduced-motion: reduce) {
  :root { --xp-press-scale: 1; }
  .xp-sheet, .xp-card { transition: opacity var(--xp-dur-fade) linear !important; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --xp-glass: var(--xp-surface); --xp-glass-strong: var(--xp-surface); }
  .xp-glass { backdrop-filter: none !important; }
}