/* Receipts — design tokens (single source of truth for the palette + scale).
 * Linked before each page's inline <style>. Pages consume var(--x); never re-declare.
 *
 * Direction: a calm deep-navy "ledger" ground with a warm gold action accent and
 * an emerald second-currency accent. 60 (navy) / 30 (surfaces) / 10 (gold).
 * Deliberately NOT default Tailwind blue/indigo (studio hard rule). */

:root {
  /* Ground + surfaces (elevation ladder) */
  --bg:          #0f1729;   /* app background (deep navy) */
  --surface:     #172033;   /* cards */
  --surface-2:   #1f2b42;   /* raised cards / inputs */
  --surface-3:   #27364f;   /* hover / active fills */

  /* Text */
  --text:        #eaf0fb;   /* primary text */
  --text-2:      #b3c0d6;   /* secondary text */
  --muted:       #94a1bd;   /* tertiary / captions (AA on raised surfaces) */

  /* Accents */
  --accent:      #f4b740;   /* primary action + EUR figures (gold) */
  --accent-deep: #d99a1f;   /* pressed gold */
  --on-accent:   #1a1205;   /* text/icon on the gold gradient */
  --eur:         #f4b740;   /* euro tint */
  --ngn:         #34d399;   /* naira tint (emerald) */
  --danger:      #f87171;
  --danger-deep: #dc4c4c;

  /* Translucent surfaces (frosted bars + scrim) */
  --bg-blur:      rgba(15, 23, 41, 0.6);
  --surface-blur: rgba(23, 32, 51, 0.9);
  --scrim:        rgba(6, 10, 20, 0.72);

  /* Lines + focus */
  --border:      rgba(255, 255, 255, 0.09);
  --border-2:    rgba(255, 255, 255, 0.16);
  --focus:       #8fb3ff;

  /* Shadows — layered, tinted, low-opacity (never flat shadow-md) */
  --shadow-sm:  0 1px 2px rgba(3, 8, 20, 0.5);
  --shadow-md:  0 6px 20px -6px rgba(3, 8, 20, 0.65), 0 2px 6px rgba(3, 8, 20, 0.4);
  --shadow-lg:  0 20px 48px -12px rgba(3, 8, 20, 0.75), 0 6px 16px rgba(3, 8, 20, 0.5);
  --shadow-gold: 0 8px 24px -8px rgba(244, 183, 64, 0.45);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* Fluid sizes */
  --fs-hero: clamp(1.75rem, 6vw, 2.4rem);
  --fs-h2:   clamp(1.2rem, 4vw, 1.5rem);
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  /* Layout */
  --app-max: 520px;      /* phone-first content column */
  --tabbar-h: 64px;
}