/* Carts brand tokens — mirrors src/index.css in the app */
@font-face {
  font-family: 'Stack Sans Headline';
  src: url('/assets/fonts/stack-sans-headline-latin-wght.woff2') format('woff2-variations'),
       url('/assets/fonts/stack-sans-headline-latin-wght.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Stack Sans has no ₦ (U+20A6): borrow Inter's (OFL, subset to one glyph, variable wght).
   size-adjust maps Inter's 0.728em cap height onto Stack Sans' 0.70em digits. */
@font-face {
  font-family: 'Stack Sans Headline';
  src: url('/assets/fonts/naira-inter-wght.woff2') format('woff2-variations'),
       url('/assets/fonts/naira-inter-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20A6;
  size-adjust: 96.2%;
}
/* Metric-matched system fallback to keep layout stable while the webfont loads */
@font-face {
  font-family: 'Stack Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 100%;
  ascent-override: 100%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  /* Brand primitives — sampled from the logo */
  --color-navy:        #17304E;
  --color-terracotta:  #AA4F1A;
  --color-cream:       #EFE6D8;

  /* Semantic colours — components use only these */
  --color-bg:              #FFFFFF;
  --color-surface:         #EBEDF1;   /* cards, inputs on page */
  --color-surface-strong:  #DDE2E8;   /* chips, placeholders, pressed */
  --color-sheet:           #FFFFFF;   /* bottom sheets, menus, modals */
  --color-text:            #17304E;
  --color-text-secondary:  #33465E;   /* 8.2:1 on surface */
  --color-text-muted:      #4F6074;   /* ≥4.76:1 on white, surface, cream and tint */
  --color-placeholder:     #5E6E80;   /* 5.2:1 on white inputs */
  --color-icon-faint:      #8794A3;   /* decorative icons only, never text */
  --color-accent:          #AA4F1A;
  --color-accent-contrast: #FFFFFF;   /* 5.47:1 on accent */
  --color-accent-tint:     #EDDACD;   /* selected chip / row — pair with navy text */
  --color-accent-wash:     #F5EAE4;   /* secondary button — terracotta text 4.63:1 */
  --color-accent-border:   rgba(170, 79, 26, 0.35);
  --color-border:          rgba(23, 48, 78, 0.12);
  --color-border-strong:   rgba(23, 48, 78, 0.22);
  --color-bar-muted:       #D3D8DD;   /* inactive chart bars */
  --color-highlight:       #EFE6D8;   /* cream pill / soft highlight */
  --color-overlay:         rgba(23, 48, 78, 0.45);
  --color-shadow:          rgba(23, 48, 78, 0.16);

  /* Status — muted so they sit with the brand; all ≥4.5:1 as text on white */
  --color-success:         #2E7044;
  --color-success-tint:    #E1EFE5;
  --color-warning:         #8A5A00;
  --color-warning-tint:    #F6ECD4;
  --color-danger:          #B42318;
  --color-danger-tint:     #FBE4E1;
  --color-danger-border:   rgba(180, 35, 24, 0.35);
  --color-info:            #2D5B8A;
  --color-info-tint:       #E1EAF4;
  --color-violet:          #5E4A8E;
  --color-violet-tint:     #EAE5F3;
  --color-whatsapp:        #25D366;   /* third-party brand colour, kept intentionally */

  /* Typeface */
  --font-sans: 'Stack Sans Headline', 'Stack Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale: every old size grows ~1px (small) to ~2px (large) */
  --text-micro:      10px;   /* was ≤9  */
  --text-caption:    11px;   /* was 10  */
  --text-label:      12px;   /* was 11  */
  --text-small:      13px;   /* was 12  */
  --text-body-sm:    14px;   /* was 13  */
  --text-body:       15px;   /* was 14  */
  --text-body-lg:    16px;   /* was 15  */
  --text-title:      18px;   /* was 16-17 */
  --text-h4:         20px;   /* was 18-19 */
  --text-h3:         23px;   /* was 20-22 */
  --text-h2:         26px;   /* was 23-25 */
  --text-h1:         30px;   /* was 26-28 */
  --text-display:    34px;   /* was 29-32 */
  --text-display-lg: 38px;   /* was 33-36 */
  --text-display-xl: 44px;   /* was 37-42 */
  /* Tailwind defaults, bumped to match */
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;

  --tracking-base: -0.02em;

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

  /* Tailwind spacing unit: 0.25rem → 0.27rem (+8% on every p-/m-/gap-/w-/h- utility) */
  --spacing: 0.27rem;
}

/* ── Legacy variable names, re-pointed to the new palette so older code follows ── */
:root {
  --accent:        var(--color-accent);
  --accent-fg:     var(--color-accent-contrast);
  --accent-dim:    var(--color-accent-wash);
  --accent-border: var(--color-accent-border);
  /* Accent alpha scale (was lime) — used for tints and borders */
  /* Old lime alpha scale: faint steps were card fills → surface; mid steps → wash; strong steps → terracotta */
  --y-04: var(--color-surface); --y-05: var(--color-surface);
  --y-06: var(--color-surface); --y-07: var(--color-surface);
  --y-08: var(--color-surface); --y-09: var(--color-surface);
  --y-10: var(--color-accent-wash); --y-12: var(--color-accent-wash);
  --y-15: var(--color-accent-wash); --y-18: var(--color-accent-tint);
  --y-20: var(--color-accent-border); --y-22: var(--color-accent-border);
  --y-24: var(--color-accent-border); --y-25: var(--color-accent-border);
  --y-30: var(--color-accent-border); --y-35: var(--color-accent-border);
  --y-40: var(--color-accent);  --y-50: var(--color-accent);
  --y-60: var(--color-accent);  --y-70: var(--color-accent);
  --y-85: var(--color-accent);

  --bg-app:        var(--color-bg);
  --bg-card:       var(--color-surface);
  --bg-card-solid: var(--color-sheet);
  --sheet-bg:      var(--color-sheet);
  --card:          var(--color-surface);

  --text:          var(--color-text);
  --text-muted:    var(--color-text-muted);

  /* Was a white-alpha scale on dark. Low steps are surfaces/borders; high steps are text. */
  --w-03: rgba(23,48,78,0.03); --w-04: rgba(23,48,78,0.05);
  --w-05: rgba(23,48,78,0.06); --w-06: rgba(23,48,78,0.07);
  --w-07: rgba(23,48,78,0.08); --w-08: rgba(23,48,78,0.09);
  --w-10: rgba(23,48,78,0.11); --w-12: rgba(23,48,78,0.13);
  --w-15: rgba(23,48,78,0.16); --w-20: rgba(23,48,78,0.22);
  --w-25: var(--color-text-muted); --w-28: var(--color-text-muted);
  --w-30: var(--color-text-muted); --w-35: var(--color-text-muted);
  --w-40: var(--color-text-muted); --w-45: var(--color-text-muted);
  --w-50: var(--color-text-muted); --w-55: var(--color-text-muted);
  --w-60: var(--color-text-muted); --w-70: var(--color-text-secondary);
  --w-80: var(--color-text-secondary);
  --border:      var(--color-border);
  --border-soft: rgba(23,48,78,0.07);
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-base);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

#root {
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ── Spring easing tokens ── */
:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --snap:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Tap feedback — satisfying press + spring-back on all buttons ── */
button {
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.3s var(--spring), opacity 0.3s var(--spring);
}
button:active {
  transform: scale(0.94);
  opacity: 0.82;
  transition: transform 0.07s ease, opacity 0.07s ease;
}

/* ── Sheet entrance animation ── */
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes pop-in {
  from { transform: scale(0.94) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0);      opacity: 1; }
}
@keyframes fade-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.sheet-enter {
  animation: sheet-in 0.42s var(--spring);
}
.pop-enter {
  animation: pop-in 0.32s var(--spring);
}
.fade-up {
  animation: fade-up 0.28s var(--snap);
}

input, textarea, select, button { font-family: inherit; letter-spacing: inherit; }
::placeholder { color: var(--color-placeholder); opacity: 1; }
  /* Legacy marketing variable names, re-pointed */
  --lime: var(--color-accent);
  --lime-dim: var(--color-accent-wash);
  --lime-border: var(--color-accent-border);
  --black: var(--color-bg);
  --s1: var(--color-surface);
  --s2: var(--color-surface);
  --s3: var(--color-surface-strong);
  --border: var(--color-border);
  --border2: var(--color-border-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --body: var(--color-text-secondary);
}
body { font-family: var(--font-sans); letter-spacing: var(--tracking-base); background: var(--color-bg); color: var(--color-text); }