/* =====================================================================
   ACCRA GRID — base.css
   Tokens, reset, typography, layout primitives, utilities.
   Load order: base.css -> shell.css -> components.css -> pages/<page>.css
   ===================================================================== */

:root {
  /* ---- Palette: surfaces ---- */
  --paper: #F5F6F1;          /* canvas */
  --paper-2: #ECEEE6;        /* sunken wells, image beds */
  --paper-3: #E2E5DB;        /* pressed / dividers on paper-2 */
  --card: #FFFFFF;           /* raised tiles */
  --line: #DCE0D5;           /* hairlines on paper */
  --line-2: #C9CEC0;         /* stronger borders, inputs */

  /* ---- Palette: ink ---- */
  --ink: #0B0F0C;
  --ink-2: #333B35;          /* body copy */
  --ink-3: #5E675F;          /* meta, captions (AA on paper) */
  --ink-4: #8C948C;          /* disabled, placeholders */

  /* ---- Palette: Volta green (brand, dark tiles) ---- */
  --volta: #0D3B2E;
  --volta-2: #134A3A;        /* raised on volta */
  --volta-3: #1E6650;        /* borders/lines on volta */
  --volta-ink: #E7F0E9;      /* text on volta */
  --volta-mute: #9DB8AA;     /* meta on volta */

  /* ---- Palette: signals ---- */
  --lime: #D6F45B;           /* primary action highlight */
  --lime-2: #C4E73A;         /* lime hover/pressed */
  --lime-wash: #F0FBC8;      /* lime tint backgrounds */
  --momo: #FFCB05;           /* PAYMENTS ONLY */
  --momo-wash: #FFF4C2;
  --coral: #FF6A4D;          /* deals, alerts, LIVE */
  --coral-ink: #C23A1E;      /* coral text on light (AA) */
  --coral-wash: #FFE7E1;
  --info: #3B6FE0;           /* rare: links in dense text, info chips */
  --success: #17804F;

  /* ---- Ghana flag accents (used sparingly: Made-in-Ghana, 6th March) ---- */
  --gh-red: #CE1126;
  --gh-gold: #FCD116;
  --gh-green: #006B3F;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-micro: 0.6875rem;     /* 11 — eyebrows, tab labels */
  --fs-xs: 0.75rem;          /* 12 — meta */
  --fs-sm: 0.8125rem;        /* 13 — dense UI */
  --fs-base: 0.9375rem;      /* 15 — body (app density) */
  --fs-md: 1.0625rem;        /* 17 — lead */
  --fs-lg: 1.25rem;          /* 20 — card titles */
  --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);    /* 22-28 section titles */
  --fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);     /* 28-40 page titles */
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);     /* 36-64 hero */
  --fs-num-xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);  /* hero numbers */

  /* ---- Spacing (4pt) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --gutter: 16px;            /* page side gutter (mobile) */
  --gap: 12px;               /* bento gap (mobile) */

  /* ---- Radii: by hierarchy, not uniform ---- */
  --r-xs: 6px;    /* badges, kbd */
  --r-sm: 10px;   /* chips-in-cards, small buttons, inputs inner */
  --r-md: 14px;   /* inputs, buttons, list rows */
  --r-lg: 20px;   /* product cards */
  --r-xl: 26px;   /* bento tiles */
  --r-2xl: 32px;  /* sheets, hero tiles */
  --r-pill: 999px;

  /* ---- Elevation: soft, layered, green-tinted ---- */
  --sh-0: 0 0 0 1px var(--line);
  --sh-1: 0 1px 0 rgba(13, 59, 46, .04), 0 1px 3px rgba(13, 59, 46, .07);
  --sh-2: 0 1px 2px rgba(13, 59, 46, .06), 0 10px 28px -10px rgba(13, 59, 46, .18);
  --sh-3: 0 2px 4px rgba(13, 59, 46, .06), 0 28px 56px -16px rgba(13, 59, 46, .32);
  --sh-lift: 0 2px 6px rgba(13, 59, 46, .08), 0 18px 40px -14px rgba(13, 59, 46, .28);
  --sh-inset: inset 0 0 0 1px rgba(255, 255, 255, .06);

  /* ---- Focus ---- */
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink), 0 0 0 7px rgba(214, 244, 91, .9);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 460ms;

  /* ---- Shell metrics ---- */
  --rail-w: 0px;
  --top-h: 116px;            /* mobile: ticker 30 + appbar 86 */
  --tab-h: 68px;
  --ctx-w: 340px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ---- Texture: the "grid" — survey dots like a city plan ---- */
  --grid-dots: radial-gradient(circle at 1px 1px, rgba(13, 59, 46, .11) 1px, transparent 1.2px);
  --grid-dots-dark: radial-gradient(circle at 1px 1px, rgba(214, 244, 91, .12) 1px, transparent 1.2px);
  --grid-size: 18px 18px;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; --gap: 14px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 28px; --gap: 16px; --rail-w: 84px; --top-h: 104px; --fs-base: 0.9375rem; }
}
@media (min-width: 1440px) {
  :root { --gutter: 36px; --gap: 18px; }
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"], .ag-list-reset { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.on-dark :focus-visible, .ag-tile--volta :focus-visible, .ag-tile--ink :focus-visible {
  box-shadow: 0 0 0 2px var(--volta), 0 0 0 4px var(--lime);
}

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

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
h1, h2, h3, h4, .ag-display {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-variation-settings: "wdth" 90;
  text-wrap: balance;
}
.ag-h1 { font-size: var(--fs-2xl); font-weight: 800; }
.ag-h2 { font-size: var(--fs-xl); font-weight: 750; }
.ag-h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; }
.ag-hero-title { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.035em; line-height: .95; font-variation-settings: "wdth" 82; }

.ag-lead { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
.ag-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.ag-eyebrow {
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ag-num, .ag-mono {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.02em;
}
.ag-num-xl { font-family: var(--font-num); font-size: var(--fs-num-xl); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.ag-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ag-link:hover { text-decoration-color: var(--ink); }
.ag-clamp-1, .ag-clamp-2, .ag-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ag-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.ag-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ag-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.ag-kbd {
  font-family: var(--font-num); font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--card); border: 1px solid var(--line-2); color: var(--ink-3);
  box-shadow: 0 1px 0 var(--line-2);
}

/* ---------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------- */
.ag-container { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }
.ag-stack { display: flex; flex-direction: column; gap: var(--stack, var(--s-4)); }
.ag-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--s-2)); }
.ag-split { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ag-section { margin-block: var(--s-8); }
.ag-section:first-child { margin-top: var(--s-4); }

/* Bento: 4 cols on phones, 8 on tablets, 12 on desktop. Spans degrade gracefully. */
.ag-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--gap);
}
.ag-bento > * { grid-column: span 4; min-width: 0; }
.ag-bento > .m-2 { grid-column: span 2; }
@media (min-width: 640px) {
  .ag-bento { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .ag-bento > * { grid-column: span 8; }
  .ag-bento > .t-2 { grid-column: span 2; } .ag-bento > .t-3 { grid-column: span 3; }
  .ag-bento > .t-4 { grid-column: span 4; } .ag-bento > .t-5 { grid-column: span 5; }
  .ag-bento > .t-6 { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .ag-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ag-bento > * { grid-column: span 12; }
  .ag-bento > .d-2 { grid-column: span 2; } .ag-bento > .d-3 { grid-column: span 3; }
  .ag-bento > .d-4 { grid-column: span 4; } .ag-bento > .d-5 { grid-column: span 5; }
  .ag-bento > .d-6 { grid-column: span 6; } .ag-bento > .d-7 { grid-column: span 7; }
  .ag-bento > .d-8 { grid-column: span 8; } .ag-bento > .d-9 { grid-column: span 9; }
  .ag-bento > .r-2 { grid-row: span 2; }
}

/* Product grid: auto-fit cards */
.ag-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .ag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ag-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

/* Horizontal snap scroller (rails of cards/chips). Bleeds to the gutter on mobile. */
.ag-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--item-w, 44%);
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-bottom: 6px;
  scrollbar-width: none;
}
.ag-scroller::-webkit-scrollbar { display: none; }
.ag-scroller > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .ag-scroller { --item-w: 30%; } }
@media (min-width: 1024px) { .ag-scroller { --item-w: 220px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }

/* Media boxes: always reserve space */
.ag-media { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: var(--ratio, 1 / 1); }
.ag-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Texture helpers */
.ag-dots { background-image: var(--grid-dots); background-size: var(--grid-size); }
.ag-dots-dark { background-image: var(--grid-dots-dark); background-size: var(--grid-size); }

/* Utilities */
.ag-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ag-hide-mobile { display: none !important; }
@media (min-width: 1024px) {
  .ag-hide-mobile { display: revert !important; }
  .ag-hide-desktop { display: none !important; }
}
.ag-text-coral { color: var(--coral-ink); }
.ag-text-volta { color: var(--volta); }
.ag-text-mute { color: var(--ink-3); }
.ag-strike { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-4); }

/* Reveal on scroll (app.js adds .is-in). Content stays visible without JS. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }