/* Receipt page tokens: the vendored design system (../../design-system/, same
   commit the customer web app vendors), plus the three things this surface decides
   for itself. Load order: design-system.css, then this file, then page CSS.

   1. Font: Thmanyah (founder decision, 2026-09-27), self-hosted. Licence
      allows web embedding and forbids redistribution: this repo is private,
      keep these files out of anything public. There is no 600 weight, so
      font-weight 600 renders as 700.
   2. Light theme only. A receipt is paper; merchant logos are drawn for a
      light background. The page sets data-theme="light" on <html>.
   3. AA text contrast. The design system's light --color-text-secondary
      (neutral-600, 3.3:1 on white) and --color-text-tertiary (neutral-500,
      2.1:1) fail WCAG AA for body text; both map to neutral-700 (8.6:1)
      here. Hierarchy comes from size and weight instead. */

@font-face { font-family: 'Thmanyah Sans'; src: url("../../fonts/thmanyah/thmanyahsans-Regular.7089f03a7ccd.woff2") format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url("../../fonts/thmanyah/thmanyahsans-Medium.1391e0f4b3ad.woff2") format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url("../../fonts/thmanyah/thmanyahsans-Bold.b6d5de40be17.woff2") format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah Serif Display'; src: url("../../fonts/thmanyah/thmanyahserifdisplay-Bold.648327b59366.woff2") format('woff2'); font-weight: 700; font-display: swap; }

:root,
[data-brand]:not([data-brand="neutral"])[data-theme="light"] {  /* the platform theme; never the white-label one */
  --font-sans: 'Thmanyah Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: var(--font-sans);
  --font-display: 'Thmanyah Serif Display', var(--font-sans);

  --color-text-secondary: var(--neutral-700);
  --color-text-tertiary: var(--neutral-700);

  /* Surface roles used by every receipt block. */
  --receipt-page-bg: var(--color-bg-primary);
  --receipt-card-bg: var(--color-bg-elevated);
  --receipt-card-radius: var(--radius-2xl);
  --receipt-card-pad: var(--space-6);
  --receipt-gap: var(--space-4);
  --receipt-divider: var(--color-border-secondary);
  --receipt-accent-soft: var(--brand-50);
  --receipt-max-width: 480px;
  --receipt-tap: 44px;

  /* Package D (standalone pages): 48 px intro tiles and the code input. */
  --receipt-tile-radius: 14px;

  /* Package T (status pages): the warning tile's icon. The design system's
     --color-warning (#f59e0b) is under 3:1 on its own soft background; this is
     the value its .alert-warning already uses for text. */
  --receipt-warning: #b45309;
}