/* ============================================
   VTU PLATFORM — DESIGN TOKENS
   Single source of truth for all styling
   ============================================ */

:root {

  /* ─── SURFACES ─────────────────────────── */
  --bg-base:        #080808;   /* page background */
  --bg-card:        #101010;   /* cards */
  --bg-elevated:    #181818;   /* modals, dropdowns */
  --bg-hover:       #202020;   /* hover states */
  --bg-input:       #141414;   /* input fields */

  /* ─── BORDERS ───────────────────────────── */
  --border-subtle:  #1F1F1F;   /* very subtle dividers */
  --border-soft:    #2E2E2E;   /* card borders */
  --border-active:  #444444;   /* focused inputs, selected state */
  --border-strong:  #606060;   /* high contrast borders */

  /* ─── TEXT ──────────────────────────────── */
  --text-primary:   #F0F0F0;   /* main text */
  --text-secondary: #909090;   /* labels, captions */
  --text-muted:     #505050;   /* placeholders, disabled */
  --text-inverse:   #080808;   /* text on light backgrounds */

  /* ─── FUNCTIONAL ────────────────────────── */
  /* Used sparingly — only where meaning matters */
  --success:        #16A34A;   /* confirmed, credited, done */
  --success-soft:   #14532D;   /* success background tint */
  --success-glow:   rgba(22, 163, 74, 0.08);

  --danger:         #DC2626;   /* failed, error */
  --danger-soft:    #7F1D1D;   /* danger background tint */

  --pending:        #D97706;   /* processing, waiting */
  --pending-soft:   #78350F;   /* pending background tint */

  --info:           #2563EB;   /* notices, tips */
  --info-soft:      #1E3A8A;   /* info background tint */

  /* ─── MONEY STATES ──────────────────────── */
  --money:          #F0F0F0;   /* wallet amounts */
  --profit:         #16A34A;   /* cashback, earnings */
  --loss:           #DC2626;   /* debits, spending */

  /* ─── TYPOGRAPHY ────────────────────────── */
  --font-mono: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
  --font-ui:   -apple-system, 'Segoe UI', system-ui, Ubuntu, sans-serif;

  --font-normal: 400;
  --font-medium: 500;
  --font-semi:   600;
  --font-bold:   700;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   42px;   /* wallet balance only */

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  /* ─── SPACING ───────────────────────────── */
  /* Intentionally uneven — not a perfect grid */
  --space-xs:   6px;
  --space-sm:   10px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  --card-padding:    20px;
  --page-padding-x:  16px;    /* mobile */
  --page-padding-y:  24px;

  /* ─── BORDER RADIUS ─────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ─── SHADOWS ───────────────────────────── */
  /* We use borders, not shadows. One exception: */
  --wallet-glow:
    0 0 80px rgba(22, 163, 74, 0.06),
    0 0 160px rgba(22, 163, 74, 0.03);

  /* ─── TRANSITIONS ───────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX ───────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-top:      500;

  /* ─── LAYOUT ────────────────────────────── */
  --bottom-nav-height: 64px;
  --top-bar-height:    56px;
  --max-content-width: 480px;   /* mobile-first max width */
  --sidebar-width:     240px;   /* desktop/admin */

}

/* ─── LIGHT MODE OVERRIDE ─────────────────── */
/* User can toggle — variables flip, nothing else changes */
[data-theme="light"] {
  --bg-base:        #F8F8F8;
  --bg-card:        #FFFFFF;
  --bg-elevated:    #F0F0F0;
  --bg-hover:       #E8E8E8;
  --bg-input:       #FFFFFF;

  --border-subtle:  #EBEBEB;
  --border-soft:    #DEDEDE;
  --border-active:  #AAAAAA;
  --border-strong:  #888888;

  --text-primary:   #111111;
  --text-secondary: #666666;
  --text-muted:     #AAAAAA;
  --text-inverse:   #F0F0F0;

  --wallet-glow:
    0 0 60px rgba(22, 163, 74, 0.10),
    0 0 120px rgba(22, 163, 74, 0.05);
}

/* ─── SPACING UTILITIES ──────────────────────────────────────── */
.u-mb-xs { margin-bottom: var(--space-xs); }
.u-mb-sm { margin-bottom: var(--space-sm); }
.u-mb-md { margin-bottom: var(--space-md); }
.u-text-center { text-align: center; }
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-text-left  { text-align: left; }
.u-mt-xl      { margin-top: var(--space-xl); }
.agent-insight-row { max-width: 320px; }