:root {
  /* ============================================================
     Brand palette (DRC E-Cash)

     Taken from the client's colour reference ("APP背景色 DRC E-Cash")
     and the app mark: pale sky-blue glass surfaces, a deep navy for
     type and headers, the flag's sky blue as the action colour, and
     the flag's yellow and red as accents only.

     Blue carries the design; red and yellow never become large fills —
     at surface scale they read as alarm and caution, not as brand.
     Nothing else in the codebase hardcodes a brand colour: change the
     values below and every surface follows.
     ============================================================ */
  --brand-blue-900: #0C2653;
  --brand-blue-800: #153A75;  /* navy — header surfaces, headings */
  --brand-blue-700: #1A4F9C;
  --brand-blue-600: #1E6BD0;  /* flag sky blue, deepened to carry white text — the primary action colour */
  --brand-blue-400: #4A9BEA;  /* light blue, gradient highlights */
  --brand-blue-200: #BFDAF3;
  --brand-red: #CE1021;        /* flag red */
  --brand-red-dark: #A50D1B;
  --brand-yellow: #F7D618;     /* flag yellow — fills only */
  --brand-yellow-deep: #B7860B; /* darkened, so yellow can carry text on white */
  --brand-gold: #D9A62E;       /* the reference's thin gold rings */
  --brand-grey: #8A94A6;

  /* Channel triplets so rgba() tints can be derived from the same source
     as the solid colours — otherwise tints drift when the brand changes. */
  --brand-blue-rgb: 30, 107, 208;
  --brand-deep-rgb: 21, 58, 117;
  --brand-red-rgb: 206, 16, 33;
  --brand-yellow-rgb: 247, 214, 24;
  --brand-gold-rgb: 217, 166, 46;

  /* ---------- Semantic ---------- */
  --color-primary: var(--brand-blue-600);
  --color-primary-dark: var(--brand-blue-800);
  --color-primary-light: var(--brand-blue-400);
  --color-accent: var(--brand-red);
  --color-accent-soft: var(--brand-yellow);
  --color-header-bg: var(--brand-blue-800);
  --color-header-bg-dark: var(--brand-blue-900);

  /* Success is an emerald on purpose: against a blue brand it is
     unmistakably "money in", never confused with a brand surface. */
  --color-success: #12B76A;
  --color-warning: var(--brand-yellow-deep);
  --color-danger: var(--brand-red);
  --color-info: #1E6BD0;

  --color-text-main: #1B2433;
  --color-text-general: #4E5868;
  --color-text-secondary: #8A93A3;
  --color-text-placeholder: #c3c9d2;
  --color-text-on-dark: #ffffff;

  --color-border-1: #dde3ec;
  --color-border-2: #eef1f6;

  --color-bg: #ffffff;
  --color-bg-floating: #f3f6fa;
  --color-bg-list-header: #f8fafc;
  --color-page-bg: #ecf2f8;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* The curve iOS uses for sheets: most of the distance is covered early,
     then a long gentle settle. It is what makes an expand read as "eased into
     place" rather than "played back over 400ms". */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --drawer-dur: 400ms;

  --shadow-card: 0 4px 20px rgba(21, 58, 117, 0.08);
  --shadow-float: 0 8px 24px rgba(var(--brand-blue-rgb), 0.42);

  --nav-height: 68px;
  --device-width: 400px;
  --device-height: 860px;
  /* Height of the shell's fake status bar. Every screen reserves exactly this
     much room at its top, so collapsing it to 0 (narrow screens, below) both
     hides the bar and reclaims the space in one move.
     Sized off the real thing: a status bar is roughly 5% of an iPhone's screen
     height, and .device is 400x860 — near enough to 393x852pt to use the
     ratio directly. */
  --statusbar-h: 44px;
  --color-hero-top: #f8fbfe;
}

/* A real phone browser already draws a status bar; a second painted one just
   duplicates it. Matches the .device breakpoint in base.css. */
@media (max-width: 480px) {
  :root { --statusbar-h: 0px; }
}