/* ============================================
   vars.css — PaisaIQ Design System
   ============================================ */

:root {
  /* Fonts */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Spacing */
  --space-xs:  0.4rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 6rem;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition:      0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.13);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.15);

  /* Max width */
  --max-w: 1160px;
  --max-w-calc: 1000px;
}

/* ===== LIGHT THEME (default) ===== */
[data-theme="light"] {
  --bg:           #f7f8fc;
  --bg-2:         #ffffff;
  --bg-3:         #eef0f8;
  --bg-card:      #ffffff;
  --bg-input:     #ffffff;
  --border:       rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.18);

  --text:         #0f1117;
  --text-muted:   #5a6177;
  --text-faint:   #b0b8cc;

  /* Brand colors — deep trustworthy green */
  --accent:        #0ea66e;
  --accent-dark:   #098a5b;
  --accent-light:  #e6f9f2;
  --accent-2:      #1a56db;
  --accent-2-light:#eff4ff;

  --btn-primary-bg:   #0ea66e;
  --btn-primary-text: #ffffff;
  --btn-ghost-border: rgba(0,0,0,0.12);
  --btn-ghost-text:   #0f1117;

  --tag-bg:   #e6f9f2;
  --tag-text: #0ea66e;
  --tag-bg-2: #eff4ff;
  --tag-text-2: #1a56db;

  --input-bg:     #ffffff;
  --input-border: #dde1ee;
  --input-focus:  #0ea66e;

  --success: #0ea66e;
  --error:   #e53e3e;
  --warning: #d97706;
  --info:    #1a56db;

  --navbar-bg: rgba(247,248,252,0.92);
  --footer-bg: #0f1117;

  /* Chart colors */
  --chart-1: #0ea66e;
  --chart-2: #1a56db;
  --chart-3: #f59e0b;
  --chart-4: #e53e3e;
  --chart-5: #8b5cf6;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg:           #0d1117;
  --bg-2:         #161b22;
  --bg-3:         #1c2230;
  --bg-card:      #161b22;
  --bg-input:     #1c2230;
  --border:       rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.16);

  --text:         #e6edf3;
  --text-muted:   #7d8590;
  --text-faint:   #3d444d;

  --accent:        #3fb884;
  --accent-dark:   #2da36f;
  --accent-light:  rgba(63,184,132,0.1);
  --accent-2:      #4b8ef1;
  --accent-2-light:rgba(75,142,241,0.1);

  --btn-primary-bg:   #3fb884;
  --btn-primary-text: #0d1117;
  --btn-ghost-border: rgba(255,255,255,0.12);
  --btn-ghost-text:   #e6edf3;

  --tag-bg:    rgba(63,184,132,0.1);
  --tag-text:  #3fb884;
  --tag-bg-2:  rgba(75,142,241,0.1);
  --tag-text-2:#4b8ef1;

  --input-bg:     #1c2230;
  --input-border: #2d3748;
  --input-focus:  #3fb884;

  --success: #3fb884;
  --error:   #fc8181;
  --warning: #fbbf24;
  --info:    #4b8ef1;

  --navbar-bg: rgba(13,17,23,0.92);
  --footer-bg: #080b10;

  --chart-1: #3fb884;
  --chart-2: #4b8ef1;
  --chart-3: #fbbf24;
  --chart-4: #fc8181;
  --chart-5: #a78bfa;
}