/* =========================================================================
   BGFIBank Cameroun, country website mockup
   base.css : design tokens, reset, typography, layout primitives

   Proposed by De Bouana Cameroon SARL following digital audit DBC-AUD-BGFI-2026-01.
   Brand tokens measured from the group site at groupebgfibank.com so that the
   country site reads as part of the same family (audit recommendation 8).
   ========================================================================= */

:root {
  /* Brand, BGFIBank -------------------------------------------------- */
  --navy-900: #0F244C;
  --navy-800: #002E5C;
  --navy-700: #003A74;   /* primary surface */
  --navy-500: #00569C;   /* brand blue, the "BGFI" wordmark */
  --navy-300: #8FB4D4;
  --navy-100: #D3E4F1;

  /* sage-600 is the text-weight sage. It is deliberately darker than the brand
     sage so that eyebrows, timestamps and small labels clear WCAG AA (4.5:1)
     on white, on --surface-alt and on --surface-sage. The brand sage below is
     reserved for the wordmark and for surfaces, never for small text. */
  --sage-600: #647055;
  --sage-500: #A2AF8E;   /* brand sage, the "Bank" wordmark */
  --sage-300: #B2BE98;
  --sage-200: #C2CEA4;
  --sage-100: #DEE6B7;
  --sage-050: #F1F5E4;

  /* Ink and surfaces ------------------------------------------------- */
  --ink-900: #1A1A1A;
  --ink-800: #222222;
  --ink-700: #282828;
  --ink-500: #5A6472;
  --ink-300: #8E97A3;
  --line-200: #E2E6EB;
  --line-100: #EFF2F5;
  --surface: #FFFFFF;
  --surface-alt: #F7F9FA;
  --surface-sage: #F6F8EF;

  /* Status ----------------------------------------------------------- */
  --ok-600: #1F7A4D;
  --ok-050: #E8F5EE;
  --warn-600: #8A6100;
  --warn-050: #FCF4E2;
  --alert-600: #9B2226;
  --alert-050: #FBEDED;

  /* De Bouana, used only in the proposal chrome ----------------------- */
  --db-blue: #1226C4;
  --db-green: #7DA80B;

  /* Type ------------------------------------------------------------- */
  --font-sans: "Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.375rem;
  --fs-4xl: 3rem;

  /* Space, radius, shadow -------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(15, 36, 76, 0.06), 0 1px 3px rgba(15, 36, 76, 0.08);
  --shadow: 0 4px 6px rgba(15, 36, 76, 0.05), 0 10px 24px rgba(15, 36, 76, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 36, 76, 0.12), 0 2px 8px rgba(15, 36, 76, 0.08);

  --wrap: 1200px;
  --wrap-narrow: 820px;
  --header-h: 76px;

  /* Glyph marking a link that leaves the site and opens in a new tab.
     Applied as a mask so it inherits currentColor and stays legible on white,
     on navy surfaces and inside buttons alike. */
  --ext-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M19 19H5V5h5V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2v5z'/%3E%3C/svg%3E");
}

/* Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy-900);
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.625rem, 1.25rem + 1.6vw, var(--fs-3xl)); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, var(--fs-xl)); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-700); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }

hr { border: 0; border-top: 1px solid var(--line-200); margin: var(--sp-6) 0; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-200); }
th { font-weight: 700; color: var(--navy-900); font-size: var(--fs-sm); }

figure { margin: 0; }
address { font-style: normal; }

/* Focus, visible and consistent everywhere -------------------------- */
:focus-visible {
  outline: 3px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--navy-700);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* Layout primitives -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--alt { background: var(--surface-alt); }
.section--sage { background: var(--surface-sage); }
.section--navy { background: var(--navy-700); color: #E7EEF5; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a { color: var(--sage-200); }
.section--navy a:hover { color: #fff; }

.section-head { max-width: 760px; margin-bottom: var(--sp-6); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-600);
  margin-bottom: var(--sp-2);
}
.section--navy .eyebrow { color: var(--sage-300); }

.lede { font-size: var(--fs-md); color: var(--ink-500); }
.section--navy .lede { color: #C9D6E4; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }

/* Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

/* Wide content scrolls inside itself, the page never scrolls sideways */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
}
.scroll-x > table { min-width: 640px; border-radius: var(--radius); }
.scroll-x > table td:first-child, .scroll-x > table th:first-child { padding-left: var(--sp-5); }

/* Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Print ---------------------------------------------------------------- */
@media print {
  .proposal-bar, .site-header, .site-footer, .portal-launcher { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}