:root {
  /* ============================================================
     Brand palette — UCB One (United Commercial Bank PLC, Bangladesh)

     Sampled from the shipping UCB One app: the launcher mark
     (UCB + red pill + ONE) and the Home screen's header band.
     The header is NOT flat red — it runs from a near-black maroon
     at the status bar down into brand red, which is what stops a
     large red fill from reading as an error state.

     upay's own palette lives further down under [data-brand="upay"].
     Two brands, one shell: UCB is the container, upay is a module
     inside it, so the module re-skins rather than the whole app.
     ============================================================ */
  --ucb-red: #E11C28;          /* the mark's red — primary action colour */
  --ucb-red-600: #C4161F;
  --ucb-red-700: #A11119;
  --ucb-red-100: #FDE7E8;
  --ucb-maroon-900: #2B0507;   /* top of the header gradient */
  --ucb-maroon-800: #4A0509;
  --ucb-maroon-700: #6E0C12;
  --ucb-ink: #141416;          /* the marketing charcoal */
  --ucb-grey: #9A9A9E;         /* the mark's grey half-pill */

  /* Channel triplets so rgba() tints derive from the same source as the
     solids — otherwise every tint drifts when the brand changes. */
  --brand-rgb: 225, 28, 40;
  --brand-deep-rgb: 110, 12, 18;

  /* ---------- Semantic ---------- */
  --color-primary: var(--ucb-red);
  --color-primary-dark: var(--ucb-red-700);
  --color-primary-light: #F2545E;
  --color-primary-soft: var(--ucb-red-100);
  --color-accent: var(--ucb-maroon-700);

  /* The three stops of the Home / section header gradient. */
  --color-header-top: var(--ucb-maroon-900);
  --color-header-mid: var(--ucb-maroon-700);
  --color-header-bot: var(--ucb-red-600);
  /* Flat header colour, for anything needing a single value (status-bar
     backing, active tab, icon tints). */
  --color-header-bg: var(--ucb-red-600);
  --color-header-bg-dark: var(--ucb-maroon-800);

  /* Success stays emerald rather than brand red — in a banking app red is
     already "money leaving", so it cannot also mean "worked". */
  --color-success: #12B76A;
  --color-warning: #C98A00;
  --color-danger: #D92D20;
  --color-info: #0A6BC4;

  --color-text-main: #1B1B1D;
  --color-text-general: #55565A;
  --color-text-secondary: #8C8D93;
  --color-text-placeholder: #C4C5CA;
  --color-text-on-dark: #ffffff;

  --color-border-1: #E3E4E8;
  --color-border-2: #F0F1F4;

  --color-bg: #ffffff;
  --color-bg-floating: #F5F6F8;
  --color-bg-list-header: #FAFAFB;
  --color-page-bg: #F2F3F5;

  /* Bengali needs a font that actually carries the conjuncts. Noto Sans
     Bengali is loaded in index.html; without it a bn string falls back to
     whatever the OS has and the ligatures break into separate letters. */
  --font-family: 'Inter', 'Noto Sans Bengali', -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 covered early, then a
     long gentle settle — 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(0, 0, 0, 0.07);
  --shadow-float: 0 8px 24px rgba(var(--brand-rgb), 0.42);
  --shadow-header: 0 10px 30px rgba(var(--brand-deep-rgb), 0.28);

  --nav-height: 68px;
  --device-width: 400px;
  --device-height: 860px;
  /* Height of the shell's fake status bar. Every screen reserves exactly this
     much 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:
     ~5% of an iPhone's screen height, and .device is 400x860. */
  --statusbar-h: 44px;

  /* Foreground form of the primary colour. Identical to --color-primary for
     UCB; upay overrides it, because its primary is a yellow fill that cannot
     carry text. Use this for links, section rules and active tab labels. */
  --color-primary-text: var(--ucb-red);
}

/* ============================================================
   upay — UCB Fintech Company Ltd's mobile wallet (MFS)

   Applied as data-brand="upay" on the device shell whenever a
   upay screen is on top of the stack (see app.js). Only tokens
   change: not one component knows which brand it is painting.

   Sampled from the shipping upay app — the smiley "u" mark is
   #FCCC00 over #00549C, nudged to the brand sheet's #FDC800 /
   #02509C. Yellow is the action colour and always carries dark
   ink: yellow-on-white text fails contrast at every size, so it
   is a fill here, never a foreground.
   ============================================================ */
.device[data-brand="upay"] {
  --upay-yellow: #FDC800;
  --upay-yellow-600: #E0B000;
  --upay-yellow-100: #FFF6D6;
  --upay-blue: #02509C;
  --upay-blue-700: #013A73;
  --upay-blue-900: #01284F;
  --upay-blue-400: #1B7ACF;

  --brand-rgb: 253, 200, 0;
  --brand-deep-rgb: 1, 40, 79;

  --color-primary: var(--upay-yellow);
  --color-primary-dark: var(--upay-yellow-600);
  --color-primary-light: #FFE06B;
  --color-primary-soft: var(--upay-yellow-100);
  --color-accent: var(--upay-blue);
  --color-primary-text: var(--upay-blue);

  --color-header-top: var(--upay-blue-900);
  --color-header-mid: var(--upay-blue-700);
  --color-header-bot: var(--upay-blue);
  --color-header-bg: var(--upay-blue);
  --color-header-bg-dark: var(--upay-blue-900);

  --color-info: var(--upay-blue-400);
  --shadow-float: 0 8px 24px rgba(253, 200, 0, 0.5);
  --shadow-header: 0 10px 30px rgba(1, 40, 79, 0.3);
  --color-page-bg: #F3F5F8;
}

/* Yellow is a fill, so every surface painted with --color-primary as a
   background needs dark ink on it. Collected here rather than sprinkled
   through the component sheet, so adding a upay screen cannot miss one. */
.device[data-brand="upay"] .btn-primary,
.device[data-brand="upay"] .chip.active,
.device[data-brand="upay"] .nav-fab,
.device[data-brand="upay"] .segmented-btn.active,
.device[data-brand="upay"] .amount-tile.active,
.device[data-brand="upay"] .qs-avatar.add {
  color: var(--upay-blue-900);
}

/* 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; }
}