:root {
  /* ============================================================
     Brand palette (Cameroon)

     NOTE: these values were sampled from the earlier CNEF mark, which
     has since been replaced by CETEM. The palette has deliberately NOT
     been re-derived — swapping every surface colour is a bigger change
     than swapping a logo, and it is the client's call. If it should
     follow the new mark, CETEM's own ink is a darker teal-green
     (#084838) with gold (#C8A020) and no red at all; changing the
     values below is enough, nothing else hardcodes a brand colour.

     Green carries the design; the flag's red and yellow are accents
     only, never large fills — at surface scale they read as alarm and
     caution, not as brand.
     ============================================================ */
  --brand-green-900: #00522B;
  --brand-green-800: #006837;  /* darkest bar */
  --brand-green-700: #036939;
  --brand-green-600: #039449;  /* mid bar — the primary action colour */
  --brand-green-400: #39B44C;  /* lightest bar */
  --brand-green-200: #B6E0BC;
  --brand-red: #ED1F29;        /* ribbon red */
  --brand-red-dark: #C4111B;
  --brand-yellow: #FBDD0D;     /* ribbon yellow — fills only */
  --brand-yellow-deep: #C98A00; /* darkened, so yellow can carry text on white */
  --brand-grey: #96979B;       /* wordmark grey */

  /* Channel triplets so rgba() tints can be derived from the same source
     as the solid colours — otherwise tints drift when the brand changes. */
  --brand-green-rgb: 3, 148, 73;
  --brand-deep-rgb: 0, 104, 55;
  --brand-red-rgb: 237, 31, 41;
  --brand-yellow-rgb: 251, 221, 13;

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

  /* Success stays a brighter emerald: if it were the brand green, an
     incoming amount would look like every other green on the screen. */
  --color-success: #12B76A;
  --color-warning: var(--brand-yellow-deep);
  --color-danger: var(--brand-red);
  --color-info: #2E7D8C;

  --color-text-main: #232323;
  --color-text-general: #555555;
  --color-text-secondary: #8f8f8f;
  --color-text-placeholder: #c7c7c7;
  --color-text-on-dark: #ffffff;

  --color-border-1: #e0e0e0;
  --color-border-2: #f0f0f0;

  --color-bg: #ffffff;
  --color-bg-floating: #f5f5f5;
  --color-bg-list-header: #fafafa;
  --color-page-bg: #eef2ed;

  --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(0, 0, 0, 0.07);
  --shadow-float: 0 8px 24px rgba(var(--brand-green-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: #fbfdfb;
}

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