/* =========================================================
   NuWealth Design System — Colors & Type Tokens
   Source of truth: DESIGN-BRAND-v2.md, DESIGN-CONTRACTS-v2.md
   Font: Poppins 300–700 (no other fonts. ever.)
   ========================================================= */

/* Local Poppins — brand-shipped TTFs. Weights 300–700, no other fonts ever. */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap;
  src: url('fonts/Poppins-Light.ttf')     format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/Poppins-Regular.ttf')   format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src: url('fonts/Poppins-Medium.ttf')    format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src: url('fonts/Poppins-SemiBold.ttf')  format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src: url('fonts/Poppins-Bold.ttf')      format('truetype'); }

:root {
  /* ---------- Brand palette ---------- */
  --color-primary:           #0A4733;   /* Dark green — text, headings, icons */
  --color-accent:            #CEF17B;   /* Lime — CTAs, highlights, success */
  --color-soft:              #CDECB1;   /* Light lime — secondary accents, chart fills */
  --color-bg:                #F5F5F5;   /* Page background — NEVER pure white */
  --color-surface:           #FFFFFF;   /* Card background */
  --color-surface-alt:       #EFEFEF;   /* Alternate surface */
  --color-surface-subtle:    #F9FAFB;   /* Hover, very light callouts */
  --color-surface-muted:     #F3F4F6;   /* Tertiary button bg, icon circles */
  --color-surface-teal:      #F0F7F4;   /* Transaction page background */
  --color-frame-bg:          #E8E8E8;   /* Desktop mobile-frame chrome */

  /* ---------- Grayscale (text + chrome) ---------- */
  --color-muted:             #9CA3AF;   /* Labels, captions, errors */
  --color-subtle:            #6B7280;   /* Secondary body text */
  --color-dim:               #4B5563;   /* Tertiary text */
  --color-strong:            #374151;   /* Near-black body text */
  --color-emphasis:          #1F2937;   /* High-emphasis text */
  --color-ink:               #111827;   /* Headings, near-black */
  --color-border:            #E5E7EB;   /* Card borders, dividers */
  --color-border-light:      #F3F4F6;   /* Subtle dividers */
  --color-placeholder:       #D1D5DB;   /* Form placeholders, drag handles */

  /* ---------- Status ---------- */
  --color-success:           #CEF17B;   /* Same as accent — NuWealth uses lime */
  --color-error:             #9CA3AF;   /* GRAY — NuWealth NEVER uses red */

  /* ---------- Informational (blue, sparing use) ---------- */
  --color-info-bg:           #EFF6FF;
  --color-info-bg-strong:    #DBEAFE;
  --color-info-text:         #1D4ED8;
  --color-info-accent:       #3B82F6;

  /* ---------- Warning (amber, sparing use) ---------- */
  --color-warn-bg:           #FFFBEB;
  --color-warn-text:         #92400E;
  --color-warn-accent:       #F59E0B;

  /* ---------- Dark mode / landing dark surfaces ---------- */
  --color-dark-bg:           #0A1A13;   /* Deep green-black for landing hero */
  --color-dark-surface:      #0F2A20;   /* Dark card on dark bg */
  --color-dark-border:       #1C3A2E;   /* Dark border */

  /* ---------- Legacy aliases ---------- */
  --nw-dark:  var(--color-primary);
  --nw-lime:  var(--color-accent);
  --nw-soft:  var(--color-soft);
  --nw-gray:  var(--color-surface-alt);
  --nw-bg:    var(--color-bg);

  /* =========================================================
     TYPOGRAPHY — Poppins only. Sizes in px.
     ========================================================= */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Size scale (reference DESIGN-BRAND-v2 §3) */
  --text-micro:     8px;    /* Tiny step indicators */
  --text-caption:   9px;    /* Timestamps, fine print */
  --text-label:    10px;    /* Uppercase tracked section labels */
  --text-small:    11px;    /* Card secondary text */
  --text-body-sm:  12px;    /* Small body */
  --text-mono:     13px;    /* Wallet addresses, code */
  --text-body:     14px;    /* Standard body */
  --text-base:     16px;    /* Default */
  --text-input:    17px;    /* Form inputs */
  --text-lg:       18px;    /* Page title */
  --text-xl:       20px;    /* Section heading */
  --text-2xl:      24px;    /* Large heading */
  --text-3xl:      30px;    /* Hero heading */
  --text-amount:   28px;    /* Amount input */
  --text-hero:     44px;    /* Portfolio totals */
  --text-display:  64px;    /* Landing hero */

  /* Weights (only 300, 400, 500, 600, 700 — no extremes) */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* =========================================================
     LAYOUT / SPACING
     ========================================================= */
  --width-mobile:      430px;     /* Content max width */
  --width-cta:         300px;     /* CTA max width on landing */
  --width-nav-item:    56px;      /* Bottom nav item */
  --height-chart:      220px;     /* Portfolio chart */
  --height-row:        52px;      /* List row */
  --height-touch:      44px;      /* Minimum touch target */

  --radius-sm:         8px;
  --radius-md:         12px;      /* Compact cards, secondary buttons */
  --radius-lg:         16px;      /* Standard cards, primary buttons */
  --radius-xl:         20px;
  --radius-full:       9999px;

  --spacing-page-x:    20px;
  --spacing-page-top:  64px;      /* pt-safe-header min */
  --spacing-card:      16px;      /* Card internal padding */
  --spacing-card-gap:  16px;      /* Card-to-card */
  --spacing-section:   24px;      /* Group-to-group */
  --spacing-cta:       18px;      /* Landing CTA vertical padding */

  /* =========================================================
     SHADOWS & GLOWS
     ========================================================= */
  --shadow-card:       0 1px 2px rgba(0,0,0,0.05);
  --shadow-cta:        0 6px 20px rgba(10,71,51,0.25), 0 2px 6px rgba(10,71,51,0.12);
  --shadow-cta-lg:     0 8px 24px rgba(10,71,51,0.3),  0 2px 8px rgba(10,71,51,0.15);
  --glow-lime:         0 6px 20px rgba(206,241,123,0.5), 0 0 40px rgba(206,241,123,0.2);
  --radial-bg:         radial-gradient(ellipse 90% 40% at 50% 0%, rgba(10,71,51,0.04) 0%, transparent 70%);
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Use these directly on bare elements.
   ========================================================= */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  line-height: 1.25;
  margin: 0;
}

/* Canonical page title: 18px semibold, dark green. ONE per page. */
.page-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  letter-spacing: -0.003em;
}

/* Hero number: 44px bold, tabular-nums (prevents layout shift). */
.hero-number {
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Card heading: 14px semibold dark green. */
.card-heading {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

p, .body {
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  color: var(--color-subtle);
  line-height: 1.5;
  margin: 0;
}

/* Section label: 10px semibold uppercase gray tracked.
   The only place ALL CAPS is permitted. */
.nw-label,
.nw-section-label {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.nw-section-label { margin-bottom: 0.5rem; padding-left: 4px; }

.caption {
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
}

.small {
  font-size: var(--text-small);
  color: var(--color-subtle);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-primary);
}

/* =========================================================
   CANONICAL COMPONENT RECIPES
   ========================================================= */

/* One card recipe. One padding. Do not freelance. */
.nw-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-card);
}

.nw-card-compact {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

/* Primary CTA: lime bg, dark green text, full width, one per screen. */
.nw-btn {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  min-height: var(--height-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
  text-decoration: none;
}
.nw-btn:active { transform: scale(0.98); }
.nw-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.nw-btn-primary {
  width: 100%;
  padding: 16px 0;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: var(--shadow-cta);
}
.nw-btn-primary:hover:not(:disabled) { opacity: 0.9; }

.nw-btn-primary-landing {
  width: 100%;
  max-width: var(--width-cta);
  padding: var(--spacing-cta) 0;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-cta-lg);
}

.nw-btn-secondary {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-surface);
}

.nw-btn-tertiary {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.nw-btn-ghost {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-subtle);
  width: fit-content;
}
.nw-btn-ghost:hover:not(:disabled) { color: var(--color-primary); }

.nw-btn-compact {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
}

/* Narration callout: left-bar only. No other borders. */
.nw-narration {
  background: var(--color-surface-subtle);
  border-left: 2px solid var(--color-success);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: var(--text-small);
  color: var(--color-subtle);
}

/* Live badge */
.nw-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}
.nw-badge-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(206,241,123,0.8);
  animation: nw-ping 1.5s ease-out infinite;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes nw-ping {
  0%   { box-shadow: 0 0 0 0 rgba(206,241,123,0.8); }
  70%  { box-shadow: 0 0 0 6px rgba(206,241,123,0); }
  100% { box-shadow: 0 0 0 0 rgba(206,241,123,0); }
}

@keyframes nwMint {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.nw-skeleton-mint {
  background: linear-gradient(
    90deg,
    var(--color-surface-muted) 0%,
    rgba(206,241,123,0.25) 50%,
    var(--color-surface-muted) 100%
  );
  background-size: 200% 100%;
  animation: nwMint 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageEnter 250ms ease-out both; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes walletShimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}