/* ==========================================================================
   InvestFlow - Design System Base Tokens (css/base_tokens.css)
   Clean Neumorphic / Modern FinTech Tokens (FinanceAI & Smart Wallet)
   ========================================================================== */

:root {
  /* Typography */
  --font-family-sans: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Primary Fintech Colors */
  --finance-blue: #2563eb;
  --finance-blue-glow: rgba(37, 99, 235, 0.28);
  --finance-cobalt: #1d4ed8;
  --finance-cobalt-dark: #1e40af;
  --finance-cyan: #06b6d4;
  --finance-emerald: #10b981;
  --finance-amber: #f59e0b;
  --finance-purple: #8b5cf6;
  --finance-rose: #f43f5e;

  /* FinanceAI Pastel Tint System for KPI Cards */
  --pastel-blue-bg: rgba(59, 130, 246, 0.08);
  --pastel-blue-border: rgba(59, 130, 246, 0.22);
  --pastel-blue-icon-bg: rgba(59, 130, 246, 0.16);
  --pastel-blue-icon: #2563eb;

  --pastel-green-bg: rgba(16, 185, 129, 0.08);
  --pastel-green-border: rgba(16, 185, 129, 0.22);
  --pastel-green-icon-bg: rgba(16, 185, 129, 0.16);
  --pastel-green-icon: #10b981;

  --pastel-purple-bg: rgba(139, 92, 246, 0.08);
  --pastel-purple-border: rgba(139, 92, 246, 0.22);
  --pastel-purple-icon-bg: rgba(139, 92, 246, 0.16);
  --pastel-purple-icon: #8b5cf6;

  --pastel-amber-bg: rgba(245, 158, 11, 0.08);
  --pastel-amber-border: rgba(245, 158, 11, 0.22);
  --pastel-amber-icon-bg: rgba(245, 158, 11, 0.16);
  --pastel-amber-icon: #d97706;

  /* Universal Curves & Elevations */
  --radius-pill: 9999px;
  --radius-hero: 28px;
  --radius-surface: 20px;
  --radius-subtle: 14px;
  --radius-button: 12px;

  /* Smooth Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.18s var(--ease-spring);
  --transition-smooth: 0.28s var(--ease-spring);
}

/* Light Theme Defaults (FinanceAI Signature Look) */
[data-theme="light"], :root:not([data-theme="dark"]):not([data-theme="oled"]) {
  --bg-app-canvas: #f8fafc;
  --bg-surface-elevated: #ffffff;
  --bg-surface-subtle: #f1f5f9;
  --border-subtle: rgba(226, 232, 240, 0.9);
  --border-card: #e2e8f0;
  
  --text-heading: #0f172a;
  --text-body: #334155;
  --text-subtle: #64748b;
  --text-placeholder: #94a3b8;

  --shadow-soft-card: 0 4px 20px -2px rgba(0, 0, 0, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  --shadow-hover-card: 0 14px 30px -4px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
  --shadow-hero-blue: 0 16px 36px -8px rgba(37, 99, 235, 0.35);
}

/* Dark Theme FinTech Look */
[data-theme="dark"] {
  --bg-app-canvas: #0b0f19;
  --bg-surface-elevated: #151d30;
  --bg-surface-subtle: rgba(255, 255, 255, 0.04);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.1);

  --text-heading: #f8fafc;
  --text-body: #cbd5e1;
  --text-subtle: #94a3b8;
  --text-placeholder: #64748b;

  --shadow-soft-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  --shadow-hover-card: 0 18px 40px -10px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(59, 130, 246, 0.3);
  --shadow-hero-blue: 0 16px 36px -8px rgba(37, 99, 235, 0.45);
}