/* ============================================================
   BIYAPOINT — Design Tokens & CSS Variables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand Palette ──
     Primary brand colour is a deep navy (buttons, active nav/tabs, links,
     focus rings, charts). Variable names stay "--green" to avoid touching
     every selector that references them; the actual colour is navy. */
  --green:         #0B2545;
  --green-dark:    #071a33;
  --green-light:   #EEF2FA;
  --green-mid:     #c3d3e8;
  --green-faint:   #f5f8fc;

  /* ── Semantic success (payment/KYC/webhook "succeeded" states) ──
     Kept as true green, independent of the brand colour above, so
     status badges/alerts still read as "good" rather than "branded". */
  --success:       #0F6B4A;
  --success-dark:  #0a5239;
  --success-light: #E8F5E9;
  --success-mid:   #c8e6c9;

  /* ── Neutrals ── */
  --white:     #FFFFFF;
  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-800:  #1F2937;
  --gray-900:  #111827;

  /* ── Semantic Colors ── */
  --red:          #EF4444;
  --red-light:    #FEF2F2;
  --orange:       #F59E0B;
  --orange-light: #FFFBEB;
  --blue:         #3B82F6;
  --blue-light:   #EFF6FF;

  /* ── Typography ──
     font-display: swap means text renders immediately in the system fallback
     if Google Fonts is slow or blocked, then Inter paints in on top. */
  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'DM Mono',  monospace;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, var(--green), var(--green-dark));

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 16px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05);

  /* ── Radii ── */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ── Layout ── */
  --sidebar-w:    240px;
  --topbar-h:     60px;
  --page-max-w:   1280px;

  /* ── Transitions ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.15s var(--ease);
  --transition-slow: 0.3s var(--ease);
  --dur-fast: 150ms;
  --dur-base: 250ms;
}