/*
 * Beepul design system — the mini app's v2 skin.
 *
 * Source: the "Beepul Agent UI kits → Background and cards" Figma guide
 * (file P47xfMF1hhKE4UV0agdcTu). Everything in the palette block below is a value read out of
 * that file's variables; nothing here is invented, with the one derivation noted at the dark
 * surfaces.
 *
 * The site is already written entirely against the --fx-* semantic tokens, so swapping design
 * system is a remap, not a rewrite: this file redefines those tokens inside
 * [data-app='tg'][data-ds='beepul'] and every mini app component follows. The marketing site
 * never matches that selector and is untouched.
 *
 * Loads after tg.css so it wins the cascade at equal specificity.
 */

/*
 * Druk carries the headings in v2. It is a licensed Commercial Type face, so the files are not in
 * the repo — drop them in as
 *
 *   web/assets/fonts/Druk-Medium.woff2
 *   web/assets/fonts/Druk-Bold.woff2
 *
 * and the headings pick it up with no other change. Until then these two rules 404 and every
 * heading falls through to Inter, which is what the rest of the mini app is set in anyway, so
 * nothing looks broken in the meantime.
 *
 * `@font-face` cannot be scoped to a selector, but nothing outside the Beepul skin ever names
 * the family, so the site never asks for the file.
 */
@font-face {
  font-family: 'Druk';
  src: url('../assets/fonts/Druk-Medium.woff2') format('woff2');
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: 'Druk';
  src: url('../assets/fonts/Druk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

[data-app='tg'][data-ds='beepul'] {
  /* ---------- Beepul palette (verbatim from the Figma variables) ---------- */

  /* brand */
  --bp-yellow: #FFC800;     /* primary action */
  --bp-blue: #3ABAEE;
  --bp-turquoise: #3EC2B4;  /* positive */
  --bp-magenta: #EA5397;
  --bp-orange: #FF782E;     /* warning */
  --bp-red: #EB3737;        /* negative */

  /* light shades */
  --bp-yellow-light: #FFD333;
  --bp-turquoise-light: #54C9BD;
  --bp-turquoise-dark: #30978C;
  --bp-red-light: #EE5E5E;

  /* neutrals — gray-10 is the lightest, gray-150 the deepest */
  --bp-white: #FFFFFF;
  --bp-gray-10: #F5F8FA;
  --bp-gray-20: #ECF1F4;
  --bp-gray-30: #E2E8EC;
  --bp-gray-40: #D9E1E7;
  --bp-gray-50: #CFD9DF;
  --bp-gray-60: #C1CCD4;
  --bp-gray-70: #AAB6BF;
  --bp-gray-80: #8E9AA4;
  --bp-gray-90: #78858F;
  --bp-gray-100: #5F707D;
  --bp-gray-110: #3C4B56;
  --bp-gray-120: #33404A;
  --bp-gray-130: #2C373F;
  --bp-gray-140: #212B32;
  --bp-gray-150: #182026;
  --bp-black: #10161A;

  /* the yellow alpha ramp, used for washes and selected states */
  --bp-yellow-10: rgba(255, 200, 0, .1);
  --bp-yellow-20: rgba(255, 200, 0, .2);
  --bp-yellow-30: rgba(255, 200, 0, .3);

  /* ---------- the site's semantic tokens, remapped ----------
     Light uses Beepul's "secondary-white" pairing: a tinted page under white cards, which is
     what gives a scrolling list of cards its edges. */

  --fx-bg: var(--bp-gray-10);
  --fx-surface: var(--bp-white);
  --fx-raise: var(--bp-white);
  --fx-border: var(--bp-gray-20);
  --fx-bezel: var(--bp-gray-150);

  /* Beepul defines exactly two text colours — black and gray. There is no accent text colour in
     the system, so links and selected labels carry the ink and let the yellow do the signalling
     through fills, borders and washes. */
  --fx-ink: var(--bp-gray-150);
  --fx-ink2: var(--bp-gray-100);

  /* brand: yellow is a fill colour. At 1.7:1 on white it can never be text, so --fx-cyanink —
     the accent *text* token — stays ink here and only turns yellow on dark grounds below. */
  --fx-cyan: var(--bp-yellow);
  --fx-cyanink: var(--bp-gray-150);
  --fx-cyansoft: var(--bp-yellow-10);
  --fx-on-cyan: var(--bp-gray-150);
  --fx-on-cyan-muted: var(--bp-gray-120);
  --fx-btn-primary-ink: var(--bp-gray-150);

  /* the five story tones, answered in Beepul's brand colours */
  --fx-tone-promo: var(--bp-magenta);
  --fx-tone-info: var(--bp-blue);
  --fx-tone-product: var(--bp-yellow);
  --fx-tone-bonus: var(--bp-turquoise);
  --fx-tone-news: var(--bp-orange);

  /* inverted sections — Beepul's deepest neutral, dark in both themes */
  --fx-deep: var(--bp-black);
  --fx-deepink: var(--bp-white);
  --fx-deepink2: var(--bp-gray-70);
  --fx-deepink3: var(--bp-gray-90);

  /* status */
  --fx-ok: var(--bp-turquoise);
  --fx-warn: var(--bp-orange);
  --fx-err: var(--bp-red);
  --fx-oksoft: rgba(62, 194, 180, .14);
  --fx-warnsoft: rgba(255, 120, 46, .12);

  /* Beepul cards are carried by a stroke, not a shadow, and the guide shows no coloured glow —
     so the CTA keeps a plain lift instead of the cyan halo it had in v1. */
  --fx-shadow-cyan: var(--fx-shadow);
  --fx-backdrop: rgba(16, 22, 26, .62);

  /* Headings are Druk; Beepul's own Inter is the fallback and carries everything else. */
  --fx-display: Druk, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/*
 * Dark. The guide's "default-dark" pair is main #2C373F over card #3C4B56 — light for a mini app
 * that opens over Telegram's own dark chrome. Its "secondary-dark" pair is the deeper one, and
 * since the variable fetch for that frame hit the Figma rate limit the trio below is taken one
 * step at a time off the same gray ramp, mirroring how the light pairing steps gray-10 → white.
 */
[data-app='tg'][data-ds='beepul'][data-theme='dark'],
[data-theme='dark'] [data-app='tg'][data-ds='beepul'] {
  --fx-bg: var(--bp-gray-150);
  --fx-surface: var(--bp-gray-140);
  --fx-raise: var(--bp-gray-130);
  --fx-border: var(--bp-gray-130);
  --fx-bezel: var(--bp-gray-110);

  --fx-ink: var(--bp-white);
  --fx-ink2: var(--bp-gray-70);

  /* on a dark ground the brand yellow clears 11:1, so here it can carry text */
  --fx-cyanink: var(--bp-yellow);
  --fx-cyansoft: rgba(255, 200, 0, .16);

  --fx-deep: var(--bp-black);
}

/*
 * The region art is a black disc under yellow land. On a white card the disc draws its own
 * circle; on a dark one it sits a shade below the card and the globe loses its edge, leaving the
 * continents floating. A hairline in the bezel colour gives the disc back its rim without
 * touching the artwork, which stays one file for both themes. (`.region-mark` is already a
 * circle, so the shadow follows the disc exactly.)
 */
[data-app='tg'][data-ds='beepul'][data-theme='dark'] .region-mark,
[data-theme='dark'] [data-app='tg'][data-ds='beepul'] .region-mark {
  box-shadow: 0 0 0 1px var(--fx-bezel);
}

/* ---------- the few places that hardcoded cyan ---------- */

[data-app='tg'][data-ds='beepul'] ::selection { background: var(--bp-yellow-30); }

[data-app='tg'][data-ds='beepul'] .panel-glow {
  background-image: radial-gradient(circle at 86% 12%, rgba(255, 200, 0, .18), transparent 55%);
}

/* Popular is a label, checked is a choice — they must not look the same, so the label keeps the
   faint edge and the solid yellow is reserved for the card the visitor picked. The checked rule
   follows the popular one on purpose: at equal specificity the later rule wins, which is what
   lets a popular card still show as checked. */
[data-app='tg'][data-ds='beepul'] .global-plan.popular {
  background: var(--bp-yellow-10);
  border-color: var(--bp-yellow-30);
}

[data-app='tg'][data-ds='beepul'] .global-plan[aria-checked='true'] { border-color: var(--bp-yellow); }

[data-app='tg'][data-ds='beepul'] .planner-step.on { border-color: var(--bp-yellow-30); }

/* ---------- Beepul's card model ----------
   A card is a surface with a 1px stroke and a generous corner. The guide draws no shadow on one,
   so the mini app's cards drop theirs and keep the stroke. Floating things — sheets, modals, the
   sticky buy bar — keep their lift, because those are above the page rather than on it. */

[data-app='tg'][data-ds='beepul'] .card,
[data-app='tg'][data-ds='beepul'] .tg-tile,
[data-app='tg'][data-ds='beepul'] .tg-plan,
[data-app='tg'][data-ds='beepul'] .tg-step,
[data-app='tg'][data-ds='beepul'] .tg-linkrow {
  box-shadow: none;
  border-color: var(--fx-border);
}

/* The primary button is a flat yellow fill with ink on it — no gradient, no glow. */
[data-app='tg'][data-ds='beepul'] .btn-primary {
  background: var(--bp-yellow);
  color: var(--bp-gray-150);
}

[data-app='tg'][data-ds='beepul'] .btn-primary:hover { background: var(--bp-yellow-light); }

/* The soft button is the yellow wash with ink on it, matching a selected chip. */
[data-app='tg'][data-ds='beepul'] .btn-soft {
  background: var(--bp-yellow-10);
  color: var(--fx-ink);
}

[data-app='tg'][data-ds='beepul'] .btn-soft:hover { background: var(--bp-yellow-20); }

/* ---------- where the yellow actually shows ----------
   Beepul is built out of flat blocks of colour, so the icon chips take the brand fill with ink
   on it rather than the faint wash they wear in v1, which was carrying a cyan that no longer
   exists. The step numbers stay on the wash — there are a lot of them in a row and solid yellow
   that many times reads as a warning rather than as the brand. */

[data-app='tg'][data-ds='beepul'] .tg-linkrow-mark,
[data-app='tg'][data-ds='beepul'] .tg-plan-mark,
[data-app='tg'][data-ds='beepul'] .tg-blank-mark,
[data-app='tg'][data-ds='beepul'] .tg-note-mark.tone-cyan {
  background: var(--bp-yellow);
}

[data-app='tg'][data-ds='beepul'] .tg-linkrow-mark i,
[data-app='tg'][data-ds='beepul'] .tg-plan-mark i,
[data-app='tg'][data-ds='beepul'] .tg-blank-mark i,
[data-app='tg'][data-ds='beepul'] .tg-note-mark.tone-cyan i {
  color: var(--bp-gray-150);
}

/*
 * Yellow is a fill, never a foreground on a light ground. v1 could tint a small glyph with the
 * brand because cyan held up against white; #FFC800 does not (1.7:1), so the handful of icons
 * that were coloured straight from --fx-cyan take the ink instead and let the chip's own fill
 * carry whatever meaning it had.
 */
[data-app='tg'][data-ds='beepul'] .chip i,
[data-app='tg'][data-ds='beepul'] .trust-item i,
[data-app='tg'][data-ds='beepul'] .referral-gift i,
[data-app='tg'][data-ds='beepul'] .lang-opt-mark i { color: var(--fx-ink); }

/*
 * The active tab. v1 said "active" with cyan text; a yellow that cannot be text on a white bar
 * leaves nothing behind, so the signal moves to a fill — the pill Material already used, now on
 * both platforms, with the label in ink. The icon keeps its 22–24px and the row its height, so
 * the touch target is unchanged.
 */
[data-app='tg'][data-ds='beepul'] .tab[aria-current='true'] { color: var(--fx-ink); }

[data-app='tg'][data-ds='beepul'][data-os='ios'] .tab i {
  padding: 3px 16px;
  border-radius: 999px;
  transition: background-color var(--fx-fast) ease;
}

[data-app='tg'][data-ds='beepul'] .tab[aria-current='true'] i {
  background: var(--bp-yellow);
  color: var(--bp-gray-150);
}