/* ===========================================================
   Capio Commerce — Design Tokens (light, fintech)
   =========================================================== */
:root{
  --bg:            #F7F8F5;
  --bg-card:       #FFFFFF;
  --bg-subtle:     #EFF2EF;
  --bg-hover:      #EDF1EE;
  --border:        #E3E8E5;
  --border-strong: #D3DAD6;

  --primary:       #00A86B;
  --primary-deep:  #006B4F;
  --mint:          #7DFFB2;
  --primary-soft:  rgba(0,168,107,.10);

  --profit:        #00A86B;
  --profit-soft:   rgba(0,168,107,.10);
  --loss:          #E5484D;
  --loss-soft:     rgba(229,72,77,.10);
  --warning:       #F5A524;
  --warning-soft:  rgba(245,165,36,.12);
  --warning-text:  #8a5a09;
  --info:          #3483FA;
  --info-soft:     rgba(52,131,250,.10);

  --text-1:        #101412;
  --text-2:        #66736D;
  --text-3:        #96A19B;

  --font-display:  'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:      'Inter', 'Segoe UI', sans-serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-1: 0 1px 2px rgba(16,20,18,.05);
  --shadow-2: 0 12px 32px rgba(16,20,18,.10);

  --ease: cubic-bezier(.16,.8,.24,1);
}

/* ===========================================================
   Dark mode — applied via [data-theme="dark"] on <html>.
   Default is chosen from the OS/browser color-scheme; the
   toggle in the nav lets the person override it for the
   session (see Capio.initTheme in app.js).
   =========================================================== */
[data-theme="dark"]{
  --bg:            #0A0D0F;
  --bg-card:       #10151A;
  --bg-subtle:     #161C22;
  --bg-hover:      #1C242B;
  --border:        #232B32;
  --border-strong: #2C363E;

  --primary:       #2ECC82;
  --primary-deep:  #17A362;
  --mint:          #7DFFB2;
  --primary-soft:  rgba(46,204,130,.16);

  --profit:        #2ECC82;
  --profit-soft:   rgba(46,204,130,.16);
  --loss:          #FF6B6B;
  --loss-soft:     rgba(255,107,107,.16);
  --warning:       #F5A524;
  --warning-soft:  rgba(245,165,36,.18);
  --warning-text:  #F5C877;
  --info:          #4C9AFF;
  --info-soft:     rgba(76,154,255,.16);

  --text-1:        #F3F6F4;
  --text-2:        #9FADA6;
  --text-3:        #64726B;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 12px 32px rgba(0,0,0,.55);
}

/* smooth theme transition */
html{ transition: background-color .25s ease; }
body, .surface, .surface-2, .stat-tile, .app-sidebar, .capio-nav, .topbar, .form-control-c, .form-select-c, .modal-c, .toast-c, .ticker-wrap{
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}