/**
 * Maps the shared checkout panel onto this app's existing tokens.
 * Network fills stay the real MTN / Telecel / Bigtime / Ishare colors.
 * Does not replace this app's palette.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.landing-guest-shop,
.landing-shop-page,
.landing-buy-app-wrap {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  --color-bg: var(--tf-bg);
  --color-bg-secondary: var(--tf-bg-secondary);
  --color-surface: var(--tf-surface);
  --color-text: var(--tf-text-primary);
  --color-text-secondary: var(--tf-text-soft);
  --color-muted: var(--tf-text-muted);
  --color-border: var(--tf-border);
  --color-border-strong: var(--tf-border);
  --color-primary: var(--tf-blue);
  --color-secondary: var(--tf-green);
  --color-secondary-hover: var(--tf-blue);
  --color-accent: var(--tf-gold);
  --color-warning: var(--tf-gold-muted);
  --color-danger: var(--tf-red);
  --color-info: var(--tf-info-text);
  --color-on-primary: var(--tf-text);

  --color-network-mtn: #ffcb05;
  --color-network-mtn-text: #0f172a;
  --color-network-telecel: #c8102e;
  --color-network-at: #0033a0;
  --color-network-at-text: #ffffff;
  --color-network-bigtime: #7c3aed;
  --color-network-ishare: #0d9488;
  --color-fixed-111111: #111111;
  --color-fixed-1b1200: #1b1200;
  --color-fixed-7c3aed: #7c3aed;
  --color-fixed-94a3b8: var(--tf-text-muted);
  --color-fixed-22c55e: var(--tf-green);
  --color-fixed-3b82f6: var(--tf-blue);
  --color-fixed-4ade80: var(--tf-green);
  --color-fixed-5eead4: var(--tf-green-deep);
  --color-fixed-c62828: var(--tf-red);
  --color-fixed-f4f8ff: var(--tf-text-primary);
  --color-fixed-f59e0b: var(--tf-gold-muted);
  --color-fixed-fbbf24: var(--tf-gold);
  --color-fixed-0b1a28: var(--tf-bg);
  --color-fixed-172033: var(--tf-bg-secondary);
  --color-fixed-050a1e: var(--tf-bg);

  --landing-glass-bg: var(--tf-surface-muted);
  --landing-glass-bg-strong: var(--tf-surface);
  --landing-glass-border: var(--tf-border);
  --landing-glass-shadow: var(--tf-shadow-card);
  --ink: var(--tf-text-primary);
  --ink-2: var(--tf-text-muted);
  --muted: var(--tf-text-muted);
  --brand: var(--tf-blue);
  --brand-2: var(--tf-purple);
  --gold: var(--tf-gold);
  --ok: var(--tf-green);
  --on-brand: var(--tf-text);
  --accent: var(--tf-gold);
  --accent-ink: var(--tf-bg);
  --card: var(--tf-surface);
  --card-border: var(--tf-border-card);
  --input-bg: var(--tf-bg-secondary);
  --radius-md: var(--tf-radius-md);
  --radius-lg: var(--tf-radius-lg);
  --radius-xl: var(--tf-radius-xl);
  --radius-pill: var(--tf-radius-pill);
  --r-sm: var(--tf-radius-sm, 12px);
  --landing-promo-accent: var(--tf-gold);
  --landing-promo-bg: var(--tf-surface);
  --landing-promo-border: var(--tf-border);
  --landing-promo-cta-ink: var(--tf-bg);
  --landing-promo-ink: var(--tf-text-primary);
  --landing-promo-muted: var(--tf-text-muted);
  --shop-step-accent: var(--tf-blue);
  --shop-card-bg: var(--tf-surface);
  --shop-card-border: var(--tf-border);
  --shop-card-shadow: var(--tf-shadow-card);
  --tf-screen-gutter: 16px;
}