/* Design tokens — from the Claude Design handoff "Berkat UI/UX refonte".
   Dark is the default (:root); [data-theme="light"] overrides. The app sets data-theme
   explicitly from Telegram's colorScheme, so the default just avoids a first-paint flash.
   Legacy var names (--app-bg, --hint, --accent-*) are kept as aliases below so
   screens not yet migrated to the new names keep rendering. --reward is now its own amber
   money colour (was an alias of --success); money = amber, trust/verified = green. */

:root,
[data-theme="dark"] {
  --bg: #0d0d13;
  --surface: #16161e;
  --surface-2: #202029;
  --elev: #191921;
  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.16);
  --text: #ffffff;
  --text-2: #9a9aa8;
  --text-3: #62626f;
  --brand: #5b54f0;
  --brand-2: #9591ff;
  --brand-soft: rgba(122, 116, 255, 0.16);
  --success: #34d17e;
  --success-bg: rgba(52, 209, 126, 0.15);
  /* Money is amber, trust is green (the boarding-pass split, carried over from the landing).
     --reward is tuned for legible amber text on the dark surfaces; --reward-2 is the bright
     highlight, --reward-dk the deep tone for fills/edges. */
  --reward: #f0a23e;
  --reward-2: #ffb24d;
  --reward-dk: #c1741a;
  --reward-bg: rgba(240, 162, 62, 0.14);
  --warn: #f5b53d;
  --warn-bg: rgba(245, 181, 61, 0.15);
  --grad: linear-gradient(135deg, #6b63ff 0%, #5b54f0 100%);
  --hero: linear-gradient(155deg, #7b73ff 0%, #5b54f0 52%, #4a43d4 100%);
  --hatch: repeating-linear-gradient(45deg, rgba(128, 128, 150, 0.16) 0, rgba(128, 128, 150, 0.16) 1px, transparent 1px, transparent 9px);
  --overlay: rgba(10, 10, 16, 0.55);
}

[data-theme="light"] {
  --bg: #eff0f4;
  --surface: #ffffff;
  --surface-2: #f3f4f8;
  --elev: #ffffff;
  --border: rgba(20, 20, 45, 0.08);
  --border-2: rgba(20, 20, 45, 0.14);
  --text: #15151c;
  --text-2: #74748a;
  --text-3: #a6a6b6;
  --brand: #5b54f0;
  --brand-2: #5b54f0;
  --brand-soft: rgba(91, 84, 240, 0.09);
  --success: #18b26b;
  --success-bg: rgba(24, 178, 107, 0.11);
  /* On white, amber text needs a deeper tone to stay legible; fills still read amber. */
  --reward: #b3690f;
  --reward-2: #e8912b;
  --reward-dk: #8f520a;
  --reward-bg: rgba(179, 105, 15, 0.1);
  --warn: #cf8a14;
  --warn-bg: rgba(207, 138, 20, 0.11);
  --hatch: repeating-linear-gradient(45deg, rgba(128, 128, 150, 0.14) 0, rgba(128, 128, 150, 0.14) 1px, transparent 1px, transparent 9px);
  --overlay: rgba(20, 18, 40, 0.4);
}

:root {
  /* type + radii + shadows (theme-independent) */
  --font: "Schibsted Grotesk", -apple-system, system-ui, sans-serif;
  /* display = big numerics & headline figures · mono = boarding-pass data labels */
  --disp: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* "Paper" boarding-pass surface — the signature ticket/share-card/member-pass body is a
     cream physical ticket in BOTH themes (like the landing), so it never goes dark. Page
     background stays themed; only these cards are paper. Ink is the text on that paper. */
  --paper: #f6f3ea;
  --paper-2: #ece6d6;
  --ink: #1b1830;
  --ink-2: #6c6580;
  --paper-line: rgba(27, 24, 48, 0.16); /* dashed perforation + stub borders on paper */
  --reward-ink: #c1741a; /* amber money tuned to read on cream paper (both themes) */
  --r-field: 14px;
  --r-card: 20px;
  --r-bubble: 15px;
  --r-pill: 999px;
  --r-tile: 12px;
  --sh-card: 0 1px 3px rgba(0, 0, 0, 0.25);
  --sh-btn: 0 10px 24px rgba(91, 84, 240, 0.38);
  --sh-hero: 0 10px 24px rgba(91, 84, 240, 0.28);

  /* --- legacy aliases (screens not yet migrated to the new names) --- */
  --app-bg: var(--bg);
  --chat-bg: var(--bg);
  --hint: var(--text-3);
  --accent-text: var(--brand-2);
  --accent-soft: var(--brand-soft);
  --border-accent: var(--brand);
  --grad-mission: var(--grad);
  --grad-avatar: var(--grad);
  /* the ticket notch must match whatever sits behind the card */
  --notch: var(--bg);
}

/* The app owns its theme (data-theme drives --bg), so paint the app bg directly. */
body {
  background: var(--bg);
}