/* ═══════════════════════════════════════════════════════════════
   FAIR DESIGN SYSTEM — colors_and_type.css
   Core color + type CSS variables, with light/dark twins and
   ready-to-use semantic classes (h1, h2, body, mono, etc).
   Companion fonts: Bricolage Grotesque (display, self-hosted),
   Inter (UI, Google Fonts CDN), JetBrains Mono (mono, CDN).
   ═══════════════════════════════════════════════════════════════ */

/* Bricolage Grotesque — self-hosted variable font (opsz, wdth, wght) */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* Inter + JetBrains Mono — Google Fonts CDN (non-brand) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root,
[data-theme="light"] {
  /* ───────── Reference ramps (Layer 1) ───────── */
  --ref-gold-25:  #FDF8EC;
  --ref-gold-50:  #F5E6C8;
  --ref-gold-100: #E8C578;
  --ref-gold-300: #D4A043;
  --ref-gold-500: #D4A043;
  --ref-gold-600: #B8862D;
  --ref-gold-700: #8B6914;
  --ref-gold-800: #6B4F0F;
  --ref-gold-900: #4A3708;

  --ref-neutral-0:    #FFFFFF;
  --ref-neutral-50:   #FAF7F0;
  --ref-neutral-100:  #F5F3ED;
  --ref-neutral-200:  #ECE8DE;
  --ref-neutral-300:  #D4D0C3;
  --ref-neutral-400:  #A3A3A3;
  --ref-neutral-500:  #6B6B6B;
  --ref-neutral-600:  #525252;
  --ref-neutral-700:  #404040;
  --ref-neutral-900:  #111111;
  --ref-neutral-1000: #0B0B0C;

  /* ───────── Font stacks (mode-invariant) ───────── */
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  /* ───────── Radius (mode-invariant) ───────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ───────── Spacing scale (4pt base) ───────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ───────── Semantic surfaces · LIGHT ───────── */
  --surface-canvas:      #FAF7F0;
  --surface-canvas-dark: #1C1610;              /* warm-dark canvas for Black-mode home (M8a) */
  --surface-primary:     #FFFFFF;
  --surface-secondary:   #F5F3ED;
  --surface-tertiary:    #ECE8DE;
  --surface-elevated:    #FFFFFF;
  --surface-overlay:     rgba(17,17,17,0.55);
  --surface-hero:        #111111;              /* identity-bearing, mode-invariant */
  --surface-inverse:     #111111;
  --surface-brand-subtle:#FAEFD4;

  /* ───────── Hero tones · production set (M8a) ─────────
     All 4 currencies use the same mapping across every home variant.
     These are ready-to-paste CSS gradients; apply as `background:`. */
  --hero-tone-darkambient: linear-gradient(135deg, #2A2218 0%, #4A3A1E 45%, #1F1915 100%);
  --hero-tone-cream:       radial-gradient(60% 80% at 20% 30%, #F5E6C8 0%, transparent 60%),
                           radial-gradient(50% 60% at 80% 70%, #ECE8DE 0%, transparent 55%),
                           linear-gradient(135deg, #FAF7F0 0%, #F5F3ED 100%);
  --hero-tone-espresso:    linear-gradient(135deg, #3A2518 0%, #5A3820 45%, #241410 100%);
  --hero-tone-midnight:    linear-gradient(135deg, #0A1834 0%, #142754 45%, #050E23 100%);
  /* Substrate classification (drives text / border / shadow treatment):
     LIGHT  : cream · (reference) champagne, peach, sand, apricot, pearl, mist, sky, sage, frost
     DARK   : darkambient · espresso · midnight · black · (reference) mahogany, burgundy,
              chocolate, obsidian, forest, steel, ocean  */

  /* Per-currency flag pill colours */
  --flag-ngn-bg: #166534;  --flag-ngn-fg: #FFFFFF;   /* forest green */
  --flag-gbp-bg: #1E3A8A;  --flag-gbp-fg: #FFFFFF;   /* navy */
  --flag-eur-bg: #0E356F;  --flag-eur-fg: #FFCC00;   /* EU blue · gold star */
  --flag-usd-bg: #B31E35;  --flag-usd-fg: #FFFFFF;   /* red */

  /* ───────── Content (text + icon) · LIGHT ───────── */
  --content-primary:     #111111;
  --content-secondary:   #404040;
  --content-tertiary:    #6B6B6B;
  --content-disabled:    #A3A3A3;
  --content-inverse:     #FAF7F0;
  --content-brand:       #8B6914;  /* deep gold for contrast on cream */
  --content-link:        #8B6914;
  --content-on-hero:     #FAF7F0;
  --content-on-interactive: #111111;

  /* ───────── Money (its own semantic layer) ───────── */
  --money-positive:      #15803D;
  --money-negative:      #111111;
  --money-neutral:       #6B6B6B;
  --money-pending:       #8B6914;
  --money-alert:         #991B1B;

  /* ───────── State · LIGHT ───────── */
  --state-success-base:    #15803D;
  --state-success-surface: #DCFCE7;
  --state-error-base:      #991B1B;
  --state-error-surface:   #FEE2E2;
  --state-warning-base:    #A16207;
  --state-warning-surface: #FEF3C7;
  --state-info-base:       #1D4ED8;
  --state-info-surface:    #DBEAFE;

  /* ───────── Interactive · LIGHT ───────── */
  --interactive-primary:          #D4A043;
  --interactive-primary-hover:    #B8862D;
  --interactive-primary-pressed:  #8B6914;
  --interactive-primary-disabled: #ECE8DE;
  --interactive-secondary:        #FFFFFF;
  --interactive-secondary-border: #D4D4D4;
  --interactive-destructive:      #991B1B;

  /* ───────── Border · LIGHT ───────── */
  --border-default:  #E5E1D4;
  --border-subtle:   #EFEBDF;
  --border-strong:   #D4D0C3;
  --border-focus:    #D4A043;
  --border-divider:  rgba(17,17,17,0.06);
  --border-brand:    #D4A043;

  /* ───────── Brand ───────── */
  --brand-gold:      #D4A043;
  --brand-gold-deep: #8B6914;
  --brand-gold-pale: #F5E6C8;
  --brand-cream:     #FAF7F0;
  --brand-black:     #111111;
  --brand-dot:       #D4A043;

  /* ───────── Category ramp (10 tokens) ───────── */
  --cat-food: #C2410C;
  --cat-transport: #1D4ED8;
  --cat-bills: #7C3AED;
  --cat-shopping: #DB2777;
  --cat-health: #0EA5E9;
  --cat-entertainment: #9333EA;
  --cat-transfers: #525252;
  --cat-income: #15803D;
  --cat-fees: #B91C1C;
  --cat-other: #737373;

  /* ───────── Elevation · LIGHT (two-stop, subtle) ───────── */
  --elevation-0:    none;
  --elevation-1:    0 1px 3px rgba(17,17,17,0.04);
  --elevation-2:    0 4px 12px rgba(17,17,17,0.08);
  --elevation-3:    0 8px 24px rgba(17,17,17,0.12);
  --elevation-hero: 0 12px 40px rgba(17,17,17,0.24), 0 2px 8px rgba(212,160,67,0.12);

  /* ───────── Material · Liquid Glass (light) ───────── */
  --material-glass-thin-bg:       rgba(250,247,240,0.45);
  --material-glass-thin-border:   rgba(17,17,17,0.06);
  --material-glass-thin-blur:     blur(14px) saturate(180%);
  --material-glass-regular-bg:    rgba(250,247,240,0.72);
  --material-glass-regular-border:rgba(17,17,17,0.08);
  --material-glass-regular-blur:  blur(20px) saturate(180%);
  --material-glass-thick-bg:      rgba(250,247,240,0.88);
  --material-glass-thick-border:  rgba(17,17,17,0.10);
  --material-glass-thick-blur:    blur(24px) saturate(180%);
  --material-glass-gold-bg:       rgba(212,160,67,0.10);
  --material-glass-gold-border:   rgba(212,160,67,0.22);
  --material-glass-gold-blur:     blur(16px) saturate(160%);
  --material-glass-specular:      linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 48%);

  /* ───────── Motion tokens ───────── */
  --ease-standard:   cubic-bezier(0.32, 0.72, 0, 1);  /* default, Apple decel */
  --ease-enter:      cubic-bezier(0.2,  0.8,  0.2, 1);
  --ease-exit:       cubic-bezier(0.4,  0,    1,   1);
  --ease-emphasised: cubic-bezier(0.2,  0,    0,   1);

  --duration-fast:  160ms;
  --duration-base:  240ms;
  --duration-std:   320ms;
  --duration-slow:  480ms;
  --duration-hero:  620ms;

  /* ───────── Layout constants (M8a home screen) ─────────
     Canonical alignment column: 36px from screen edge — hero balance start,
     promo copy start, ledger text start (home-card mode) all line up here. */
  --layout-side-pad:        16px;   /* canonical screen gutter */
  --layout-topbar-height:   85px;   /* reserved spacer under sticky top bar */
  --layout-tabbar-pad:      120px;  /* reserved spacer above floating tab bar */
  --layout-tabbar-offset:   -4px;   /* tab bar dips into home-indicator gutter */
  --layout-hero-padding:    20px;   /* hero card internal H padding → 36px column */
  --layout-hero-padding-top: 18px;  /* hero card internal top padding (M8a canonical) */
  --layout-hero-padding-bot: 16px;  /* hero card internal bottom padding (M8a canonical) */
  --layout-align-column:    36px;   /* = side-pad + hero-padding */
  --layout-ledger-pad:      18px;   /* home-card ledger internal padding */
  --layout-promo-lead:      20px;   /* promo leading pad (aligns with hero column) */
  --layout-promo-trail:     14px;   /* promo trailing pad (preserves mini-card pos) */

  color-scheme: light;
}

[data-theme="dark"] {
  --surface-canvas:      #0B0B0C;
  --surface-primary:     #161618;
  --surface-secondary:   #1E1E20;
  --surface-tertiary:    #26262A;
  --surface-elevated:    #222226;
  --surface-overlay:     rgba(0,0,0,0.70);
  --surface-hero:        #111111;     /* still black — identity */
  --surface-inverse:     #FAF7F0;
  --surface-brand-subtle:rgba(58,47,20,0.50);

  --content-primary:        #F5F5F5;
  --content-secondary:      #B8BAC0;
  --content-tertiary:       #8A8C92;
  --content-disabled:       #4E4E54;
  --content-inverse:        #111111;
  --content-brand:          #E8C578;
  --content-link:           #E8C578;
  --content-on-hero:        #FAF7F0;
  --content-on-interactive: #111111;

  --money-positive: #4ADE80;
  --money-negative: #F5F5F5;
  --money-neutral:  #8A8C92;
  --money-pending:  #E8C578;
  --money-alert:    #F87171;

  --state-success-base:    #4ADE80;
  --state-success-surface: rgba(20,83,45,0.40);
  --state-error-base:      #F87171;
  --state-error-surface:   rgba(127,29,29,0.40);
  --state-warning-base:    #FBBF24;
  --state-warning-surface: rgba(120,53,15,0.40);
  --state-info-base:       #60A5FA;
  --state-info-surface:    rgba(30,58,138,0.40);

  --interactive-primary:         #E8C578;
  --interactive-primary-hover:   #F5E6C8;
  --interactive-primary-pressed: #D4A043;
  --interactive-primary-disabled:#26262A;
  --interactive-secondary:       #26262A;
  --interactive-secondary-border:#3A3A40;
  --interactive-destructive:     #F87171;

  --border-default:  #2A2A2E;
  --border-subtle:   #1F1F22;
  --border-strong:   #3A3A40;
  --border-focus:    #E8C578;
  --border-divider:  rgba(255,255,255,0.08);
  --border-brand:    #E8C578;

  --brand-gold:      #E8C578;
  --brand-gold-deep: #D4A043;
  --brand-gold-pale: rgba(58,47,20,0.50);
  --brand-dot:       #D4A043;

  --cat-food: #FB923C;
  --cat-transport: #60A5FA;
  --cat-bills: #A78BFA;
  --cat-shopping: #F472B6;
  --cat-health: #38BDF8;
  --cat-entertainment: #C084FC;
  --cat-transfers: #A3A3A3;
  --cat-income: #4ADE80;
  --cat-fees: #F87171;
  --cat-other: #A3A3A3;

  /* Dark elevation uses luminance rise + low-alpha shadow */
  --elevation-1:    0 1px 2px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.40);
  --elevation-2:    0 2px 4px rgba(0,0,0,0.40), 0 8px 20px rgba(0,0,0,0.50);
  --elevation-3:    0 8px 24px rgba(0,0,0,0.55);
  --elevation-hero: 0 12px 40px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.35);

  --material-glass-thin-bg:       rgba(11,11,12,0.45);
  --material-glass-regular-bg:    rgba(11,11,12,0.72);
  --material-glass-thick-bg:      rgba(11,11,12,0.88);
  --material-glass-gold-bg:       rgba(212,160,67,0.12);
  --material-glass-gold-border:   rgba(212,160,67,0.25);
  --material-glass-specular:      linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 48%);

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
   SEMANTIC TYPE — use these classes directly
   All sizes assume 1rem = 16px. Never wrap a money string.
   ═══════════════════════════════════════════════════════════════ */

.hero-balance {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--content-on-hero);
  white-space: nowrap;
}

.display-l,
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--content-primary);
}
.display-m,
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.10;
  letter-spacing: -0.025em;
  color: var(--content-primary);
}
.display-s,
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.20;
  letter-spacing: -0.018em;
  color: var(--content-primary);
}
h4, .h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.30;
  letter-spacing: -0.012em;
  color: var(--content-primary);
}
.eyebrow,
h5, .h5 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--content-tertiary);
}

.body-l, p.lead, .lead {
  font-family: var(--font-ui);
  font-size: 19px;
  line-height: 1.55;
  color: var(--content-secondary);
}
p, .body-m {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.60;
  color: var(--content-primary);
}
.body-s, small {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--content-primary);
}
.caption {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.45;
  color: var(--content-tertiary);
}

/* Amount / money typography — tabular numerics enforced */
.amount-l { font-family: var(--font-ui); font-weight: 600; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }
.amount-m { font-family: var(--font-ui); font-weight: 600; font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.amount-s { font-family: var(--font-ui); font-weight: 600; font-size: 14px; line-height: 1.35; font-variant-numeric: tabular-nums lining-nums; }

/* ═══════════════════════════════════════════════════════════════
   NUMERIC UI — Bricolage Grotesque (not mono)
   Unifies the typographic voice from hero → ledger → net-worth.
   All tokens set tabular-nums + lining-nums for column alignment.
   (Mono is reserved for reference codes / inline code only.)
   ═══════════════════════════════════════════════════════════════ */
.num-balance       { font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 1.0; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.num-balance-sym   { font-family: var(--font-ui);      font-weight: 700; font-size: 30px; line-height: 1.0; letter-spacing: 0; opacity: 0.75; transform: translateY(-3px); display: inline-block; }  /* currency glyph — smaller & dimmed reads as secondary to digits; sits above digit baseline. Inter reads cleaner than Bricolage for ₦/€ */
.num-balance-tail  { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.0; font-variant-numeric: tabular-nums lining-nums; }
.num-nuban         { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.025em; font-variant-numeric: tabular-nums lining-nums; }
.num-ledger-time   { font-family: var(--font-display); font-weight: 400; font-size: 10px; font-variant-numeric: tabular-nums lining-nums; }
.num-ledger-amount { font-family: var(--font-display); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums lining-nums; }
.num-ledger-summary{ font-family: var(--font-display); font-weight: 400; font-size: 11px; font-variant-numeric: tabular-nums lining-nums; }
.num-nw-big        { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.num-nw-tail       { font-family: var(--font-display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums lining-nums; }
.num-nw-breakdown  { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }

/* Inline code + mono */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

/* Label / eyebrow used on brand callouts */
.label-xs {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-gold-deep);
}

/* Utility */
.nums { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--content-tertiary); }
.strong { font-weight: 700; }

/* Base body reset — opt-in via class="fair-body" on <body>, or
   use the semantic vars directly in your own stylesheets. */
.fair-body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  color: var(--content-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--brand-gold-pale); color: var(--content-primary); }